Question

以下jQuery代码（postData）将数据发布到简单的php文件中，并在完成时调用sendReply或sendFail。我在postData函数中有一个console.log，sendReply和sendFail回调也有console.log。第一个console.log在FF开发者控制台中显示，而回调未显示。

php文件非常简单，因为我是第一次使用jQuery发布到php，我想在继续之前测试回调函数。

这是jQuery：

<form>

// form elements here, omitted for brevity
 // the jQuery is called from a button click event

<div class="btn_div">
<button class="btn_joinnow" id="btn_submit" style="color:rgb(255,255,255)" onClick="postData(event)">Click to submit data</button></div>

<script type="text/javascript">
function postData(event) {
    event.preventDefault();
    var datastring = $("#echo_test").serialize();
    console.log("Okay, I'm starting")
    return $.ajax({
       type: "POST",
       url: "echo_test.php",
       data: {post: datastring}
    });
}

function sendReply() {
    console.log("Okay, I'm done"); }

function sendFail() {
    console.log("Okay, I failed"); }

postData().done(sendReply, sendFail);

</script>

</form>

我可以链接回调，但是event.preventDefault不起作用：

<script type="text/javascript">
function postData(event) {
    event.preventDefault();
    var datastring = $("#echo_test").serialize();
    console.log("Okay, I'm starting")
    return $.ajax({
       type: "POST",
       url: "echo_test.php",
       data: {post: datastring}
    });.done(function() {
    console.log("Okay, I'm done");
    }).fail(function() {
    console.log("Okay, I failed");
});
}

这是超简单的php：

<?php
echo "Hello world";
?>

为什么没有一个回调函数在完成时执行？是jQuery还是php函数？ Firefox开发者控制台显示了有关php的信息：

XML Parsing Error: no root element found Location: (file location) Line Number 4, Column 1:

我正在本地（Windows）计算机上工作，而不是在云服务器上工作。那是整个问题吗？

非常感谢您提供任何见解。

Answer 1

由于您拥有的php并不在乎您发布的数据，因此这里有一些细微的调整。

为了将其保留为帖子，我将其更改为jsonplaceholder，单击后可以在控制台中看到返回响应。

<form>
<div class="btn_div">
<button href="google.com"  class="btn_joinnow" id="btn_submit" style="color:rgb(255,255,255)">Click to submit data

    </button></div>
</form>

我向Google添加了一个链接，以确保preventDefault确实起作用。

$("#btn_submit").on("click", function (event) {
    event.preventDefault();
    var datastring = JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1
    });
    console.log("Okay, I'm starting");
    return $.ajax({
        type: "POST",
        url: "https://jsonplaceholder.typicode.com/posts",
        data: {post: datastring},
        success: function (response) {
            console.log(response);
        },
        error: function (error) {
            console.log("Okay, I failed" + error);
        }
    });
});

如果您希望使用GET更简单，这里是codepen。

jQuery ajax“ .done”回调未触发

1 个答案: