Jquery插件blockUI不适用于ajax

Question

我想在进行特定的 ajax 调用时阻止当前页面，并使用 blockUI 作为消息框。我不能只使用$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

我的代码如下..

bc.find('.submit').click(function (e) {
    e.preventDefault();
    if ($(this).hasClass('lock'))
        return;
    $.blockUI();
    $(this).addClass('lock');
    bc.submit();
});

var validator;
validator = bc.validate({
    ignore: '',
    rules: {
        UserName: {
            required: true
        }
    },
    messages: {
        UserName: 'must have',
    },
    submitHandler: function (form) {
        $.ajax({
            url: '/yyyy/xxxx',
            type: 'POST',
            data: postdata,
            complete: function () {
                bc.find('.submit').removeClass('lock');
            },
            success: function (data) {
                if (data.status == 'OK') {
                    $.blockUI({ message: 'OK' });
                    ......
                }
                else {
                    switch (data.status) {
                        case 'xxx':
                        ......
                    }
                    $.unblockUI();
                }
            },
            error: function () {
                $.unblockUI();
                alert('xxx');
            }
        });
    }
});

场景是，当我点击.submit按钮时，页面被阻塞，向服务器进行ajax调用以获取数据响应。当 ajax 调用成功时，我取消阻止当前页面，如果 data.status 为“OK”，我会显示一个消息框（也基于 blockUI 插件）。否则我会在当前页面显示错误，然后取消阻止。

在2016年编辑，有一个编辑改变了问题的意思（可能是因为我当时的英语很差），我把更改回滚了，更清楚，请不要在下面更改再次。

但其实只有在ajax调用完成后（debug step over ajax complete handler中的代码），然后看：

1. 第一个 $.blockUI(); 执行
2. 是否执行$.blockUI({ message: 'OK' })
3. 然后调用$.unblockUI()

（以上是回答中chrome或firefox调试工具执行顺序异常的意思。因为ajax完成后不应该执行blockui code）

这不是我想要的，我想不通。

Answer 1

问题是由 chrome 和 firefox 中的浏览器调试工具导致的执行顺序异常。使用调试器，我确认 $.blockUI() 是否在 ajax 调用之前执行。在我跨过 ajax 中的完整处理程序后，它总是在执行。刚才我在服务端代码中设置了断点，发现执行顺序变成了我想要的正常！

2016-01-25 更新：

注意：

1. 此答案于 2012-09-26 回答。不知道chrome还是firefox现在做async call的时候还有abnormal execution sequence的东西。（不过我记得，当时设置a break point就行了——在chrome调试工具里$.blockUI({ message: 'OK' });，输入@ 987654327@(go next) ，会看到 chrome 刚刚越过断点，什么也没有发生）
2. 其实问题代码没有错误。我想我为什么问这个问题只是因为我在调试工具中看到了异常的执行顺序，这让我感到困惑，答案就在这里。如果您想了解您的代码为何不起作用或其他原因，您最好找到其他答案或提出新问题。
3. 关于abnormal execution sequence，现在，我想也可能是blockui。因为我们看不到$.blockUI() 是如何工作的，所以block element function 可能存储在chrome 执行回调堆栈的深处。如果该假设成立，我可能会将断点放在错误的行（所以可能需要在blockui source code 中设置断点）

而且，我已经很多年没有和blockui 合作了。如果你只是想要一个阻止消息框，我建议sweetalert。

Answer 2

您可以使用 ajaxBlockUI 等 ajax 包装器让您的代码更简单 - 请参阅 https://stackoverflow.com/a/28358070/460084

您所要做的就是将 blockUI:true 添加到 ajaxBlockUI，实际的阻止和解除阻止 UI 将在内部处理。

Answer 3

我遇到了同样的问题，因为我使用了 aync 为 false 的同步 ajax 调用

我通过将 ajax 调用异步为 true 解决了这个问题

$.ajaxSetup({ async :true});

Answer 4

在 beforeSend 函数中设置 Block UI，在 complete 函数中设置 unBlockUI，这样你就可以得到你期望的行为。

$.ajax({
            url: '/yyyy/xxxx',
            type: 'POST',
            data: postdata,
            beforeSend : function() {
               $.blockUI({ message: 'OK' });
            }, 
            complete: function () {
                bc.find('.submit').removeClass('lock');
                 $.unblockUI();
            },
            success: function (data) {
                if (data.status == 'OK') {

                    ......
                }
                else {
                    switch (data.status) {
                        case 'xxx':
                        ......
                    }

                }
            },
            error: function () {
                $.unblockUI();
                alert('xxx');
            }
        });

这将确保您的 UI 在请求发送后立即阻塞，并在请求完成后立即解除阻塞..