在 beforeSend 上删除 ajax loader 并在 Start 之后再次添加

Posted 2023-05-09

【中文标题】在 beforeSend 上删除 ajax loader 并在 Start 之后再次添加

【英文标题】：Remove ajax loader on beforeSend and add it again after Start

【发布时间】：2021-02-17 00:29:34

【问题描述】：

我们项目上的 ajax 事件在这段代码中被触发，并被添加到应用程序头的 jsp 中。这是一个通用的，所以我们不能在这段代码中进行更改

$( document ).ajaxSend(function( event, request, settings ) 
    $("#ajaxStatus").show()
);

$( document ).ajaxStop(function( event, request, settings ) 
    $("#ajaxStatus").hide()
);

$( document ).ajaxError(function( event, request, settings ) 
    $("#ajaxStatus").hide()
);

#ajaxStatus 是包含加载器的 div 的 id，div 是

<div id="ajaxStatus" style="display: none;">
    <div id="load_gridGrid" class="loading ui-state-default ui-state-active" style="display: block; border: none !important; width: 130px;">
        <asset:image src="ajax-loader.gif"  />
    </div>
</div>

ajax 请求是

$.ajax(
    url: "$createLink(controller: 'test',action: 'test123')",
    data: "$true",
    type: "POST",
    dataType: "json",
    beforeSend:function() 
                        
    ,
    success: function (data) 
    ,
    complete: function (data) 
    
);

所以我想要的是删除 ajax 的 beforeSend() 中的加载器。我们尝试了 .unbind() 和 .hide() 但它不起作用。一个有效的方法是 .remove()，但如果我们删除加载器，加载器的整个 div 将从 DOM 中删除，我们需要在 ajax 成功函数之后再次附加该 div 而不刷新页面。我们可以在不刷新页面的情况下再次附加该 div 吗？或者我们可以在 beforeSend() 中隐藏加载器而不删除它吗？

【参考方案1】：

我认为您可以将属性 global 设置为 false 以防止全局处理程序（ajaxSend、Stop 等）

$.ajax(
      url: "$createLink(controller: 'test',action: 'test123')",
      global: false, 

      ...

;-)

【参考方案2】：

请使用 jQuery CSS 方法尝试以下解决方案。

$.ajax(
    url: "$createLink(controller: 'test',action: 'test123')",
    data: "$true",
    type: "POST",
    dataType: "json",
    beforeSend:function()
        $('#ajaxStatus').css('display','block');
    ,
    success: function (data) 
        $('#ajaxStatus').css('display','none');
    ,
    complete: function (data) 
    
);