2

我知道还有其他关于这个的帖子。但没有答案。

情况，我有一个ajax命令。这需要时间，因为我有一些东西要拿。

我想在 ajax 的执行之间包含一个加载。

我想使用 jquery BlockUI，因为它简单且好看。

但我不知道为什么视觉效果在 ajax 加载整个数据之前不起作用（比如“成功”开始时）。

我尝试了多种方式，但没有工作。

这是我的最后一个代码：

来自http://www.codeproject.com/Articles/382390/An-Example-to-Use-jQuery-Global-AJAX-Event-Handler的函数

var AjaxGlobalHandler = {
Initiate: function(options) {
    $.ajaxSetup({ cache: false });

    // Ajax events fire in following order
    $(document).ajaxStart(function() {
        $.blockUI({
            message: options.AjaxWait.AjaxWaitMessage,
            css: options.AjaxWait.AjaxWaitMessageCss
        });
    }).ajaxSend(function(e, xhr, opts) {
    }).ajaxError(function(e, xhr, opts) {
        if (options.SessionOut.StatusCode == xhr.status) {
            document.location.replace(options.SessionOut.RedirectUrl);
            return;
        }

        $.colorbox({ html: options.AjaxErrorMessage });
    }).ajaxSuccess(function(e, xhr, opts) {
    }).ajaxComplete(function(e, xhr, opts) {
    }).ajaxStop(function() {
        $.unblockUI();
    });
}
};

呼叫就绪

        var options = {
            AjaxWait: {
                AjaxWaitMessage: '<h1 class="ui-overlay-loading-content"><img class="ui-overlay-loading-image" src="_inc/img/loading3circle1.gif" />Chargement des données ...</h1>',

                AjaxWaitMessageCss: { backgroundColor: '#ffffff' }
            },
            AjaxErrorMessage: "<h6>Erreur!/h6>"         
        };

        AjaxGlobalHandler.Initiate(options);

调用执行

$.ajax({
                type: "POST",
                url: location.href.split('/').pop() + "?action=" + actionName + "&recherche=" + recherche,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    FillDataGridOnSuccess(response, gridId, dataTypeName);
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert("xhr.status : " + xhr.status);
                    alert("thrownError : " + thrownError);
                }
            });

我也试试

var ajaxSettings = function(options) {
    return $.extend(
        {
            beforeSubmit: function() {
            //beforeSend: function() {                
                $.blockUI({ overlayCSS: { backgroundColor: '#ffffff' },
                    message: '<h1 class="ui-overlay-loading-content"><img class="ui-overlay-loading-image" src="_inc/img/loading3circle1.gif" />Chargement des données ...</h1>'
                });
            },
            complete: function() {
                $.unblockUI();
            }
        },
        options
    );
};

我所做的每个测试都以似乎只出现在 ajaxSuccess 上的加载结束。

我知道官方 blockUI 网站http://jquery.malsup.com/block/#demos上有示例 ，他们在那里工作，但我自己不能。有人看到为什么吗？

保护你

4

0 回答 0