Javascript 为什么onreadystatechange在尝试将数据发布到php脚本时失败？_Javascript_Php_Jquery_Ajax_Xmlhttprequest

Javascript 为什么onreadystatechange在尝试将数据发布到php脚本时失败？

javascript php jquery ajax

Javascript 为什么onreadystatechange在尝试将数据发布到php脚本时失败？,javascript,php,jquery,ajax,xmlhttprequest,Javascript,Php,Jquery,Ajax,Xmlhttprequest,我有以下Javascript代码，当单击submit按钮时，使用Ajax将输入数据从notebook.php中的表单发送到数据库。名为addNote（）的函数应该通过将数据发布到add.php来处理Ajax操作出于某种原因，这不起作用onreadystate函数似乎失败，并且从add.php到变量res从未收到响应文本。我不知道为什么。代码中有什么遗漏吗以下是notebook.js、notebook.php文件的内容 notebook.js： function addNote() {

我有以下Javascript代码，当单击submit按钮时，使用Ajax将输入数据从notebook.php中的表单发送到数据库。名为

addNote（）

的函数应该通过将数据发布到

add.php

来处理Ajax操作

出于某种原因，这不起作用

onreadystate

函数似乎失败，并且从

add.php

到变量

res

从未收到响应文本。我不知道为什么。代码中有什么遗漏吗

以下是notebook.js、notebook.php文件的内容

notebook.js

：

function addNote() {
    ...
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) { // compelete & OK
            var res = xhr.responseText;
        }
    }

    var notetext = document.getElementById("notetext").value;
    xhr.open("POST", "add.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("notetext=" + notetext);
} 

function main() {

    $("#submitbtn").click(function() {
        addNote();
    });
}

$(document).ready(main);

notebook.php

：

...
<body>
    <h1>Notebook</h1>

    <div class="input">
        <form>
            <input type="text" name="notetext" id="notetext">
            <input type="submit" value="Add" id="submitbtn">
        </form>
    </div>

    <ul>
        <?php
            // add stuff to list
        ?>
    </ul>

</body>
</html>

。。。
记事本

您不会取消单击提交按钮，因此表单会提交页面

$("#submitbtn").click(function(evt) {
    evt.preventDefault();  //cancel the form submission by cancelling the click action. 
    addNote();
});

现在它向数据库添加了注释，但我必须刷新以使它们显示出来。如何修复此问题？页面不会神奇地更新，您需要更新它。返回新代码并设置innerHTML/追加新项。