在 beforeSend 之后调用 JQuery Ajax 成功函数答案

【问题标题】：JQuery Ajax success function being called after beforeSend在 beforeSend 之后调用 JQuery Ajax 成功函数
【发布时间】：2013-01-13 16:22:35
【问题描述】：

我有以下 javascript：

function someFunction(string) {
    $.ajax({
        type: "GET",
        url: "some_endpoint_returning_json",
        async: false,
        data: "param=" + string,
        beforeSend: function() {
            $.blockUI({ message: '<h1><img src="static/busy.gif" /> Just a moment...</h1>' });
        },
        complete: function () {
            $.unblockUI();
         },
        dataType: "json",
        success: function(data) {
            window.alert(data.status);
        }
    });
}

我希望 UI 在发送 ajax 请求之前阻止包含的消息，然后删除消息，取消阻止 ui，然后执行成功功能。

目前情况如下：

UI 阻塞，但不显示消息
弹出成功窗口提示
确认警报窗口后，会弹出 BlockUI 消息一瞬间，然后 UI 解除阻塞，页面返回初始状态

【问题讨论】：

为什么将async 设置为false？这是你的问题的主要原因
调试，能否将服务器代码的执行延迟几秒。这可能是因为在浏览器刷新操作发生之前，服务器返回了 ajax 请求
这是因为 async 设置为 false。谢谢大家的快速回复。我不是 UI 专家，我只是在电视上玩一个。

标签： javascript jquery ajax blockui

【解决方案1】：

如果您将async 设置为false，浏览器将在处理ajax 请求时停止执行所有操作。尽管beforeSend 确实在发送ajax 请求之前执行，但同步请求可能发生得如此之快，以至于浏览器实际上并没有刷新屏幕并显示您的$.blockUI 更改。在 ajax 完成后（当它们立即被删除时），您确实可以在很短的时间内看到它们。

如果您必须使用异步，您可以通过单独调用 $.blockUI 并在启动 ajax 请求之前设置一个较短的超时时间（可能为 100 毫秒）来解决此问题。

【讨论】：

您救了我的命，先生！