Question

有一个页面上有很多请求ajax。执行查询时，我想显示带有文本＆＃34;正在加载＆＃34;。

的块

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

但它仅适用于第一次请求。

Answer 1

来自docs：

的ajaxStart工作原理

描述：注册要在第一个 Ajax时调用的处理程序请求开始

我认为你应该手动显示和隐藏每个ajax调用的加载器，在ajax调用之前调用$( "#loader" ).show();然后使用ajax的完整选项来隐藏它，如下所示：

$( "#loader" ).show();
$.ajax({
        type: "POST",
        url: url,
        data: data,
        success: function(msg) {
            //stuffs
        },
        complete: function() {
            $( "#loader" ).hide();
        }
    });

<强>编辑：

如果你不想编辑你的ajax请求，也许你可以尝试ajaxSend()和ajaxComplete()，这些应该是针对所有ajax调用执行的，而不是ajaxStart()和ajaxStop()：

 $(document).ajaxSend(function() {
            $( "#loader" ).show();
        });
 $(document).ajaxComplete(function(){
            $( "#loader" ).hide();
        });

Answer 2

使用.ajaxComplete()代替.ajaxStop()

.ajaxComplete() - 为每个完成的请求运行，当您想对每个请求/结果执行某些操作时使用此选项。请注意，这并不能替换成功处理程序，因为解析后的数据不是其中一个参数（即使出现错误也会运行） - 您可能需要.ajaxSuccess()请求情况。

.ajaxStop() - 在每批请求完成后运行，通常您会将此与.ajaxStart()结合使用，以显示/隐藏＆＃34;正在加载...＆＃ 34;某种类型的指标 - 或者在一批AJAX请求完成后执行其他操作，就像主要的最后一步一样。

$(document).ajaxStart(function() {
            $( "#loader" ).show();
        });
$(document).ajaxComplete(function(){
            $( "#loader" ).hide();
        });

的更新： -

DEMO

Answer 3

正如Ruben所说，AjaxSend和AjaxComplete是要走的路。

但另一个问题是，由于在每个ajax请求完成后调用AjaxComplete，它会在第一个ajax请求之后隐藏加载div。但是所需的行为应该是在所有ajax请求完成后隐藏加载div。

我们怎样才能实现你的要求？简单！在AjaxComplete中检查在隐藏div之前是否没有挂起的ajax请求。

    $(document).ajaxSend(function() {
            $( "#loader" ).show();
     });
     $(document).ajaxComplete(function(){
            if ($.active === 1) {
                $( "#loader" ).hide();
            }
     });

jQuery ajaxStart仅适用于第一个请求

3 个答案:

DEMO