Question

我正在尝试使用jQuery ajax从表单中收集数据，然后使用print_r打印数据。

我的index.php看起来像这样：

<!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>

在我的ajax函数中，我引用了insert.php，看起来像这样：

<?php
    print_r($_POST);
?>

Answer 1

除非您使用GET

，否则您将获得1.8中的type

从jQuery 1.9.0开始，method是type
的别名

在$ _POST

中没有任何内容

如果您继续使用1.8或

method: "POST",

type: "POST",

更改为jQuery的1.9+以保留方法

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 } ?>

Answer 2

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>

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

2 个答案: