doudou5023 2017-06-14 12:55
浏览 47
已采纳

使用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);
?>
  • 写回答

2条回答 默认 最新

  • duanchui1279 2017-06-14 15:00
    关注

    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

    1. change method: "POST", to type: "POST", if you stay on 1.8 OR
    2. 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 } ?>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog