Question

我正在尝试在页面上的ajax调用期间显示加载微调器。我想针对不同的ajax调用并显示不同的微调器。事实上，由于ajaxStart是一个全局事件，所有ajax调用最终会同时显示所有微调器。

这有效......它增加了课程＆＃34; loading＆＃34;到包含微调器的隐藏div并显示它。

$(document).bind("ajaxStart", function () {
    $body.addClass("loading");
});

$(document).bind("ajaxStop", function () {
    $body.removeClass("loading");
});

现在从其他堆栈的答案我已经看到你可以添加名称空间到ajaxstart / stop （jQuery should I use multiple ajaxStart/ajaxStop handling）

......沿着

的路线

$(document).bind("ajaxStart.secondCall", function () {
    $body.addClass("loading2");
});

$(document).bind("ajaxStop.secondCall", function () {
    $body.removeClass("loading2");
});

但这并不适用于目前的形式。任何指导都将不胜感激......

更新：

作为对ILYAS解决方案的补充并基于他的指导我在我的AJAX CALL中实现了AJAX启动功能....

function sendResponse(thread_id){
        $(document).off(".reference_call");
         $(document).on("ajaxStart.secondCall", function () {
         $('.spinner').show();
      });
 $.ajax({
    url: 'someURL.php',
    type: 'post',
    data: {
              //data
         },
            success: function(data) {
            $(document).on("ajaxStop.secondCall", function () {
               $('.spinner').hide();
            });
                    //do stuff....

                    } else {

                     //do stuff....
                    }
              }
        });
  return false;
}

Answer 1

因此，正如在与问题相关的讨论中提到的那样，您可以使用自定义命名空间绑定和解除与ajax事件的绑定。这是简单的example演示这种方法。在代码的第一部分中，您将绑定到具有.firstCall命名空间的ajax事件，如下所示：

$(document).on("ajaxStart.firstCall", function () {
    $('.spinner1').show();
});
$(document).on("ajaxStop.firstCall", function () {
    $('.spinner1').hide();
});
// then goes your ajax call

稍后在代码中，当您需要使用不同的微调器发送第二个ajax时，您必须从.firstCall命名空间解除绑定并绑定到.secondCall，如下所示：

$(document).off(".firstCall");
$(document).on("ajaxStart.secondCall", function () {
    $('.spinner2').show();
});
$(document).on("ajaxStop.secondCall", function () {
    $('.spinner2').hide();
});
// then goes your second ajax call

作为替代方案，您可以考虑使用一组全局ajax事件处理程序，并将您的逻辑移动到在这些回调中显示/隐藏的微调器，但这实际上取决于它是什么逻辑。

Answer 2

我遇到同样的问题并通过$.active和beforeSend : function(){},

解决

问题：我在设置间隔中有一些代码用于刷新通知，我们全局应用了loding覆盖，因此所有AJAX加载覆盖，每个设置间隔显示interval.SO如何删除特定ajax的覆盖？

setInterval(function () { RefreshNotification(); }, 10000);

                    $(document).ajaxStart(function () {        
                        $('#dvLoading').show();
                    });
                    $(document).ajaxStop(function () {
                        $('#dvLoading').hide();
                    });

解决方案：如何删除覆盖 **解决方案1：**
在之前的简单隐藏叠加

$.ajax({
        type: 'GET',
        datatype: 'HTML',
        url: NotificationURL,
        beforeSend: function () {

                $('#dvLoading').hide();

        },
        success: function (result) { }

});

问题：如果并行请求上面的代码不起作用

解决方案2：简单隐藏在发送前的覆盖并检查总ajax请求的条件

$.ajax({
        type: 'GET',
        datatype: 'HTML',
        url: NotificationURL,
        beforeSend: function () {
            //console.log($.active);
            if ($.active < 2) {
                $('#dvLoading').hide();
            }
        },
        success: function (result) {
            $("#header_notification_bar").html("");
            $("#header_notification_bar").html(result);
        },
        error: function
            (XMLHttpRequest, textStatus, errorThrown) {
           alert(errorThrown);
        }
    });

享受上述代码应该可以正常运作

针对包含AjaxStart / Stop的特定ajax调用

2 个答案: