Question

我想知道如何编码

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

注意： 我不打算在我的每个ajax请求函数中反复编码。我想要它Genric。以便我的脚本知道是否有任何ajax请求执行$("#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");
});

更新忘记了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");
};

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

4 个答案: