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

【问题标题】：Remove ajax loader on beforeSend and add it again after Start在 beforeSend 上删除 ajax loader 并在 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" alt="" />
    </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() 中隐藏加载器而不删除它吗？

【问题讨论】：

标签： html jquery ajax fancybox-3

【解决方案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) {
    }
});

【讨论】：