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

I have the following javascript:

我有以下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);
        }
    });
}

I want the UI to block with the included message before sending the ajax request, then remove the message, unblock the ui and then perform the success function.

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

Currently here is what is happening:

目前正在发生的事情：

1. the UI blocks, but doesn't display the message
2. UI阻止，但不显示消息
3. The success window alert pops up
4. 弹出成功窗口警报
5. Upon confirming the alert window, the BlockUI message pops up for a split second, then the UI unblocks and the page returns to its initial state
6. 确认警报窗口后，BlockUI消息弹出一瞬间，然后UI解除阻塞，页面返回其初始状态

1 个解决方案

#1

If you set async to false, the browser will halt the execution of everything while the ajax request is served. Although beforeSend does execute before the ajax request is sent, the synchronous request may occur so quickly that the browser doesn't actually refresh the screen and show your $.blockUI changes. You do get to see them for a very short time after the ajax completes (when they are removed immediately).

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

If you must use async, you may be able to get around this by calling $.blockUI separately and setting a short timeout (100 MS perhaps) before starting the ajax request.

如果你必须使用异步，你可以通过单独调用$ .blockUI并在启动ajax请求之前设置一个短暂的超时（可能是100 MS）来解决这个问题。