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

Question

我想知道如何编码

//if there is any ajax request
   $("#loader").css("display","block");
//on success:
    $("#loader").css("display","none");

注意：我不打算在我的每个ajax请求函数中反复编码。 我想要它Genric。 所以我的脚本知道是否有任何ajax请求do $("#loader").css("display","block"); 如果有任何ajax成功，请执行$("#loader").css("display","none");

Answer 1

您正在寻找的神奇之处是jQuery.ajaxStart（）和jQuery.ajaxStop（） 。 您可能还会发现jQuery.ajaxComplete（）很有用。

例：

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

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

Answer 2

当您在$ .document（准备好）中连接应用程序时，请查看$.ajaxStart和$.ajaxEnd ：

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

UPDATE忘记了ajaxStop ...... @Cory的回答让我想起了。 更新了我的回答。

Answer 3

这些其他解决方案很棒，但我不确定它们是否解决了在启动和成功时调用$("#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

Answer 4

如果你发出两个或三个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");
};