Question

在ajax调用中使用async：false时，有没有办法在chrome中显示加载？使用settimeout时，在settimeout函数中使用多个ajax同步调用时会出现许多问题。并且加载在firefox中没有settimeout但在chrome中没有工作。

请建议任何其他方式来显示加载。

代码：

 function setDetails() {
            debugger;
            jQuery('loading').show();
            ajaxindicatorstart('loading data.. please wait..');

           setTimeout(function () {

            var serverUrl = location.protocol + "//" + location.host;
            var oDataUri = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet";
            debugger;
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                url: oDataUri,
                async: false,
                beforeSend: function (XMLHttpRequest) {
                    ajaxindicatorstart('loading data.. please wait..');
                    XMLHttpRequest.setRequestHeader("Accept", "application/json");
                },
                success: function (data, textStatus, XmlHttpRequest) {
                    debugger;
                    var isDomainExists = false;
                    if (data == null || data.d.results.length <= 0 ) {
                        debugger;
                        //other code
                        oDataUri1 = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet";
                        debugger;
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            datatype: "json",
                            url: oDataUri1,
                            data: jsonPO,
                            async: false,
                            beforeSend: function (XMLHttpRequest) {
                                XMLHttpRequest.setRequestHeader("Accept", "application/json");
                            },
                            success: function (data, textStatus, XmlHttpRequest) {
                                debugger;
                                checkInCRM();
                                ajaxindicatorstop();
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert("Error while store license data: " + errorThrown);
                            }
                        });

                    }
                    else {
                        if (keyDetail != data.d.results[0].new_var)
                        {
                            oDataUri1 = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet(guid'" + id + "')";
                            debugger;
                            $.ajax({
                                type: "POST",
                                contentType: "application/json; charset=utf-8",
                                datatype: "json",
                                url: oDataUri1,
                                data: jsonPO,
                                async: false,
                                beforeSend: function (XMLHttpRequest) {
                                    XMLHttpRequest.setRequestHeader("Accept", "application/json");
                                    XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
                                },
                                success: function (data, textStatus, XmlHttpRequest) {

                                    checkInCRM();
                                    ajaxindicatorstop();
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    alert("Error while store license data: " + errorThrown);
                                }
                            });
                        }
                        else {}
                    }
                    ajaxindicatorstop();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Error while getting license data: " + errorThrown);
                    onclickflag = false;
                }
            });
            ajaxindicatorstop();
            }, 10);
        }

function ajaxindicatorstart(text) {
            if (jQuery('body').find('#resultLoading').attr('id') != 'resultLoading') {
                jQuery('body').append('<div id="resultLoading" style="display:none"><div><img src="new_loading.gif"><div>' + text + '</div></div><div class="bg"></div></div>');
            }
            //
            jQuery('#resultLoading').css({
                'width': '100%',
                'height': '100%',
                'position': 'fixed',
                'z-index': '10000000',
                'top': '0',
                'left': '0',
                'right': '0',
                'bottom': '0',
                'margin': 'auto'
            });

            jQuery('#resultLoading .bg').css({
                'background': '#000000',
                'opacity': '0.7',
                'width': '100%',
                'height': '100%',
                'position': 'absolute',
                'top': '0'
            });

            jQuery('#resultLoading>div:first').css({
                'width': '250px',
                'height': '75px',
                'text-align': 'center',
                'position': 'fixed',
                'top': '0',
                'left': '0',
                'right': '0',
                'bottom': '0',
                'margin': 'auto',
                'font-size': '16px',
                'z-index': '10',
                'color': '#ffffff'

            });

            jQuery('#resultLoading .bg').height('100%');
            jQuery('#resultLoading').fadeIn(300);
            jQuery('body').css('cursor', 'wait');
        }
        function ajaxindicatorstop() {
            jQuery('#resultLoading .bg').height('100%');
            jQuery('#resultLoading').fadeOut(300);
            jQuery('body').css('cursor', 'default');
        }

Answer 1

@Haresh Vidja答案代码是完美的....唯一的问题是装载程序image / div不会在beforeSend内自动显示。以下是解决方案：

        beforeSend: function () {
            $('#resultLoading').show();
            ajaxindicatorstart('loading data.. please wait..');
            //XMLHttpRequest.setRequestHeader("Accept", "application/json");
        }

在beforeSend发送ajax请求时，加载程序会加载到达到成功时间为止＆amp; ajaxindicatorstop()成功触发。

Answer 2

如果你正在使用jQuery，有很多方法可以在ajax start和ajax complete事件时显示加载器。

仅适用于特定请求

$.ajax({
   beforeSend: function(xhr, settings){
      // write code for show loader here
   },
   complete: function(xhr, status){
      // write code for show loader here
   }

});

如果您想为每个ajax请求设置全局

$( document ).ajaxStart(function() {
// write code for show loader here
});
$( document ).ajaxComplete(function() {
// write code for hide loader here
});

您的代码中的更正

function setDetails() {
    jQuery('loading').show();

    var serverUrl = location.protocol + "//" + location.host;
    var oDataUri = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet";

    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        url: oDataUri,
        async: false,
        beforeSend: function (XMLHttpRequest) {

            ajaxindicatorstart('loading data.. please wait..');

            XMLHttpRequest.setRequestHeader("Accept", "application/json");
        },
        success: function (data, textStatus, XmlHttpRequest) {
            debugger;
            var isDomainExists = false;
            if (data == null || data.d.results.length <= 0 ) {
                debugger;
                //other code
                oDataUri1 = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet";
                debugger;
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    datatype: "json",
                    url: oDataUri1,
                    data: jsonPO,
                    async: false,
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("Accept", "application/json");
                    },
                    success: function (data, textStatus, XmlHttpRequest) {
                        debugger;
                        checkInCRM();
                        ajaxindicatorstop();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("Error while store license data: " + errorThrown);
                    }
                });
            }
            else {
                if (keyDetail != data.d.results[0].new_var)
                {
                    oDataUri1 = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet(guid'" + id + "')";
                    debugger;
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        datatype: "json",
                        url: oDataUri1,
                        data: jsonPO,
                        async: false,
                        beforeSend: function (XMLHttpRequest) {
                            XMLHttpRequest.setRequestHeader("Accept", "application/json");
                            XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
                        },
                        success: function (data, textStatus, XmlHttpRequest) {
                            checkInCRM();
                            ajaxindicatorstop();
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("Error while store license data: " + errorThrown);
                        }
                    });
                }
                else {}
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Error while getting license data: " + errorThrown);
            onclickflag = false;
        }
        complete: function(){
            ajaxindicatorstop();
        }
    });
}
function ajaxindicatorstart(text) {
    if (jQuery('body').find('#resultLoading').attr('id') != 'resultLoading') {
        jQuery('body').append('<div id="resultLoading" style="display:none"><div><img src="new_loading.gif"><div>' + text + '</div></div><div class="bg"></div></div>');
    }
    //
    jQuery('#resultLoading').css({
        'width': '100%',
        'height': '100%',
        'position': 'fixed',
        'z-index': '10000000',
        'top': '0',
        'left': '0',
        'right': '0',
        'bottom': '0',
        'margin': 'auto'
    });
    jQuery('#resultLoading .bg').css({
        'background': '#000000',
        'opacity': '0.7',
        'width': '100%',
        'height': '100%',
        'position': 'absolute',
        'top': '0'
    });
    jQuery('#resultLoading>div:first').css({
        'width': '250px',
        'height': '75px',
        'text-align': 'center',
        'position': 'fixed',
        'top': '0',
        'left': '0',
        'right': '0',
        'bottom': '0',
        'margin': 'auto',
        'font-size': '16px',
        'z-index': '10',
        'color': '#ffffff'
    });
    jQuery('#resultLoading .bg').height('100%');
    jQuery('#resultLoading').fadeIn(300);
    jQuery('body').css('cursor', 'wait');
}
function ajaxindicatorstop() {
    jQuery('#resultLoading .bg').height('100%');
    jQuery('#resultLoading').fadeOut(300);
    jQuery('body').css('cursor', 'default');
}

Answer 3

Thnx全力帮忙。最后我得到了答案。

同时在beforesend中添加jQuery('loading').show();，并将settimeout添加到1000。

Answer 4

有同样的问题。并得到了解决方案

请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

如果您在ajax调用中使用属性“ async：false”，请尝试此解决方案。

    $("div.spanner").show();
    setTimeout(function () {
        $.ajax({
                url: '@Url.Action("SaveAnswer")',
                type: "POST",
                data: data,
                async: false,
                success: function (result) {
                    console.log(result);
                    if (result.Status) {                            
                        bool = true;

                    } else {
                        alert(result.Message);
                    }
                },
            error: function (result) {
                $("div.spanner").hide();
                }
        });
    }, 10);

使用chrome中的ajax同步调用加载显示的方式是什么？

4 个答案: