使用 $.post() 使用 JQuery POST 表单答案

【问题标题】：POST form with JQuery using $.post()使用 $.post() 使用 JQuery POST 表单
【发布时间】：2016-01-31 11:45:11
【问题描述】：

我有以下表格

<form id="colorTest" method="POST">
    <input type="text" id='responseText' name="responseText" value="">
    <input type="button" id='confirm' name="confirm" value="confirm">
    <input type='text' id="idNum" name="idNum">
    <input type='text' id='correct' id="correct">
</form>

只有#responseText的值是实际输入的，#idNum是从另一个页面传过来的，而其他字段是由这个函数填充的：

<script type="text/javascript">
    var arr = [2,5,6,7,10,16,29,42,57];
    x = 0
    /* idNum is passed from another page to this one */
    $(document).ready(function() {
        document.getElementById('idNum').value = localStorage.memberID;
        /* when something is typed in the form */
        $('#responseText').on('input', function() {
            /* the value is stored */
            var response = document.getElementById('responseText').value;
            /* and compared with the vector arr that contains the correct answers*/
            if( response == arr[x]){
                $("#correct").attr('value', 'yes');
            }else{ 
                $("#correct").attr('value', 'no');
            };
        });
       /* confirm is the button to send the asnwer */
       $('#confirm').click(function(){
           $.post("testColor.php", $("#colorTest").serialize());
           x = x + 1;
       });
   });      
</script>

这是我的 php：

<?php
    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $response = $_POST["responseText"];
    $memberID = $_POST["idNum"];
    $timeStmp = time();
    $correct = $_POST["correct"];

    $sql = "INSERT INTO colorBlind (memberID, response, correct, timeStmp)
            VALUES ('$memberID', '$response' ,'".$correct."','".$timeStmp."')";

    if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

    $conn -> close();
?>

现在，我确信在#confirm 上发生单击事件时正确调用了 php，因为在 php 中调用的时间戳记录在我的数据库中。然而，字段中的任何值都没有在 php.ini 中传递。即如果做类似的事情：

echo $_POST["idNum"];

我得到一个空字段。

有人知道我做错了什么或对如何调试有任何建议吗？我在这方面花了几天时间没有任何进展。

【问题讨论】：

你是在另一个php页面中传递变量还是所有这些都在同一个页面中？
我真的在你的代码中看不到 $.post()
在#confirm clicked 事件处理程序中没有idNum 相关内容。
在javascript中请添加；在 x 值中，例如 x = 0;
@mwweb 它们是两个不同的页面，php 是分开的@Mohamed-Yousef 对不起，我搞砸了复制粘贴。我现在添加了带有 $.post 的行。 @MarmikBhatt 谢谢，我已经修复它并且知道它有效。我不敢相信我花了这么多天来做这么明显的事情。顺便问一下，如果我使用$.post()，是否需要在form标签中指定method=POST？

标签： php jquery html forms web

【解决方案1】：

我注意到的第一件事是你的

<input type='text' id='correct' id="correct">

包含id="correct" 两次。我确定您的意思是添加name="correct"。

当你使用$("#colorTest").serialize()时，会返回

responseText=foo&idNum=bar&correct=foobar

我可以看到这将如何用于 GET 请求。但是当您使用 $.post() 时，您需要为您的 POST 数据传入一个键/值对对象。

例如，这应该可以工作：

var params = {
    responseText: 'foo',
    idNum: 'bar',
    correct: 'foobar'
};
$.post("testColor.php", params);

【讨论】：