使用jquery ajax显示输入字段数据

I am trying to use jQuery ajax to collect data from a form and then print the data using print_r.

My index.php looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>CRUD application with AJAX</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#insert').on("click", function(event){
                    event.preventDefault();
                    $.ajax({
                        url: "insert.php",
                        method: "post",// here we pass the form methos
                        data: $('form').serialize(), // data is sent from here
                        dataType: "text",
                        success: function(strDate){
                            $('#message').text(strDate)
                        }
                    })
                })  
            })
        </script>
    </head>
    <body>
    <p id="message"></p>
    <form method="post" id="insert_form">
    <table cellpadding="5" cellspacing="5">
        <tr>
            <th>Enter Name</th><td><input type="text" id="name" name="name"></td>
        </tr>
        <tr>
            <th>Enter Email</th><td><input type="text" id="email" name="email"></td>
        </tr>
        <tr>
            <th>Enter Contact</th><td><input type="text" id="contact" name="contact"></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="button" id="insert" name="insert" value="Insert"></td>
        </tr>   
    </table>
    </form>
    </body>
</html>

In my ajax function I referred to insert.php so that looks like this:

<?php
    print_r($_POST);
?>

You get a GET in 1.8 unless you use type

Since jQuery 1.9.0, method is an alias for type

so nothing in the $_POST

change method: "POST", to type: "POST", if you stay on 1.8 OR
change to 1.9+ of jQuery to keep method

Test it here with 3.1.1

<?php
  if(isset($_POST["name"])) {
    print_r($_POST);
  }
  else {
?>
<!DOCTYPE html>
<html>
    <head>
        <title>CRUD application with AJAX</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#insert').on("click", function(event){
                    event.preventDefault();
                    $.ajax({
                        method: "POST",// here we pass the form method
                        url: "insert.php",
                        data: $('form').serialize(), // data is sent from here
                        dataType: "text",
                        success: function(strDate){
                            $('#message').text(strDate)
                        },
                        error: function(qXHR, textStatus, errorThrown ) {
                          console.log(qXHR, textStatus, errorThrown)
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
    <p id="message"></p>
    <form method="post" id="insert_form">
    <table cellpadding="5" cellspacing="5">
        <tr>
            <th>Enter Name</th><td><input type="text" id="name" name="name"></td>
        </tr>
        <tr>
            <th>Enter Email</th><td><input type="text" id="email" name="email"></td>
        </tr>
        <tr>
            <th>Enter Contact</th><td><input type="text" id="contact" name="contact"></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="button" id="insert" name="insert" value="Insert"></td>
        </tr>
    </table>
    </form>
    </body>
</html><?php } ?>

give id for the form id="#insert_form"
<script type="text/javascript">
            $(document).ready(function(){
                $('#insert').on("click", function(event){
                    event.preventDefault();
                    $.ajax({
                        url: "insert.php",
                        method: "post",// here we pass the form methos
                        data: $('#insert_form').serialize(), // data is sent from here
                        dataType: "text",
                        success: function(strDate){
                            $('#message').text(strDate)
                        }
                    })
                })  
            })
        </script>