Question

当点击提交按钮时，我使用Ajax将以下Javascript代码从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>

Answer 1

您不会取消单击提交按钮，以便表单提交页面。

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

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

1 个答案: