Question

我在一个由HTML按钮的onClick属性调用的函数中有以下代码。

它应该做的是POST到.jsp，成功写入控制台，然后重新加载页面。然而，发生的事情是消息被写入控制台（即，成功条件被调用），页面重新加载，但.jsp没有运行（我在调试中有它，它甚至没有注册任何东西）。

有趣的是，注释掉location.reload（）或简单地在其上放置一个断点可以使事情发挥作用。

为什么会出现这种情况？

$.ajax({
    type: "POST",
    url: "Move.jsp",
    data: { action: 'move',
        nodeID: nodeID
    },
    success: console.log("Moved " + nodeID)
});
location.reload();

Answer 1

AJAX中的A代表“异步”。您的$.ajax()电话基本上在后台运行，并且不会干扰您的其他代码，因此location.reload()会立即执行，无论是否发送了POST请求。

此外，console.log()应该在匿名函数内部才能正确执行。

您可以使其同步（这将锁定浏览器，直到请求完成）：

$.ajax({
    type: "POST",
    url: "Move.jsp",
    async: false,
    data: {
        action: 'move',
        nodeID: nodeID
    }
});

console.log("Moved " + nodeID);
location.reload();

或者将location.reload()移至回调中：

$.ajax({
    type: "POST",
    url: "Move.jsp",
    data: {
        action: 'move',
        nodeID: nodeID
    },
    success: function() {
        console.log("Moved " + nodeID);
        location.reload();
    }
});

Answer 2

在ajax调用有机会发布之前刷新页面。

将重新加载移至成功处理程序：

$.ajax({
    type: "POST",
    url: "Move.jsp",
    data: {
        action: 'move',
        nodeID: nodeID
    },
    success: function() {
        console.log("Moved " + nodeID);
        location.reload();
    }
});

location.reload（）阻止POST成功

2 个答案: