如何知道是否有任何AJAX请求和Ajax成功

问题描述：

注：我不会在我的每一个Ajax请求功能连连代码时。我想要它Genric。所以，我的脚本知道是否有任何Ajax请求做$("#loader").css("display","block");，如果有任何阿贾克斯成功做$("#loader").css("display","none");

答

你正在寻找的神奇之处jQuery.ajaxStart()和jQuery.ajaxStop()。您可能还会发现jQuery.ajaxComplete()有用。

例子：

$("#loader").ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).hide(); 
});

您应该使用的，而不是改变display CSS属性hide()和show()方法。

没有这样的方法'ajaxEnd' – 2012-03-16 16:31:30

@MartínCanaval：逮到过，谢谢！ – 2012-03-16 16:33:29

如果我有一个页面中的两个装载机比？ – 2012-03-22 14:59:07

答

看看$.ajaxStart和$.ajaxEnd当你连线了在$ .document（准备好）你的应用程序：

$.ajaxStart(function(){ 
    $("#loader").css("display", "block"); 
}) 
.ajaxStop(function(){ 
    $("#loader").css("display", "none"); 
});

UPDATE忘了ajaxStop ... // @科里的答案提醒我。更新了我的答案。

答

如果你发射了两个或三个ajax调用，ajaxStop只会在最后一个调用完成时触发。

var isMakingAjaxCall; 

$(document).ready(function() { 

    // Loading Screen for Ajax Calls 
    $("#loader").hide(); 
    $("#loader").ajaxStart(function() { 
     isMakingAjaxCall = true; 
     RepositionLoading(); 
     $("#loader").fadeIn(); 
    }); 
    $("#loader").ajaxStop(function() { 
     $("#loader").fadeOut(); 
     isMakingAjaxCall = false; 
    }); 
}); 

function RepositionLoading() { 
    $("#loader").css('left', "20px"); 
    $("#loader").css('top', "20px"); 
};

答

这些其他的解决方案是伟大的，但我不知道他们解决您的呼吁开始和成功您$("#loader") CSS变化的关注。

可能是这样的：

$(document).ajaxStart(function() { 

    // do something on start 
    $("#loader").css("display","block"); 

}).ajaxError(function(e, xhr, settings) { 
    // do something on error 
    $("#loader").css("display","none"); 

}).ajaxSuccess(function() { 

    // do something on success 
    $("#loader").css("display","block"); 

});

看看这个正常工作例如：http://jsbin.com/ocovoq/3/edit#preview

如何知道是否有任何AJAX请求和Ajax成功

相关推荐