在 AJAX 调用中显示和隐藏 Spinner 时出现问题

Question

我正在创建一个可以正常工作的表单，并使用 AJAX 将结果发布到后端。为了增强用户体验，我添加了一个微调器，当用户触发单击表单中的按钮的事件时应显示该微调器，并在 AJAX 请求成功后立即删除微调器，我正在尝试添加或删除使用不起作用的 CSS 的动态类

布局

<div class="container PAY">
     <div class="card-deck payment">
      <div class="card">
        <img class="card-img-top payment" src="{{asset('assets/images-new/mpesa.svg')}}" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title payment"><a href="#" id="mpesa" class="mpesa">Make Payment</a></h5>
        </div>
      </div>
<div class="modal" id="modal"><!-- Place at bottom of page --></div>
</div>

CSS

.modal {
    display:    none;
    margin-top: 10%;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     400px;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../images/ajax-loader-2.gif') 
                50% 50% 
                no-repeat;
}

/*Make sure the modal class is hidden by default and we control the style using Js*/
.PAY.loading .modal {
    display:none;   
}

AJAX 调用以添加或删除按钮

<script type="text/javascript">
  //Trigger button
$('.mpesa').on('click', function () {
    //Adds Class to the page when it loads
    ajaxStart: function() { #PAY.addClass("loading");    },
    $.ajax({
        //Contains controller of payment
        type: 'POST',
        url: 'paymentFinal',
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        success: function success(response) {
            console.log(response);
             //Removes class when the page loads
            ajaxStart: function() { #PAY.removeClass("loading");}
        },
        error: function error(data) {
            console.log(data);
        }
    });
});

</script>

Answer 1

您要么使用全局 ajaxStart/ajaxStop 处理程序，要么根据每个请求打开/关闭。

这是每个请求的一个（可能是因为我没有测试它是否有其他错误）：

$('.mpesa').on('click', function () {
    //Adds Class to the page when it loads
    $('.PAY').addClass("loading");

    $.ajax({
        //Contains controller of payment
        type: 'POST',
        url: 'paymentFinal',
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        success: function success(response) {
            console.log(response);

             //Removes class when the page loads
            $('.PAY').removeClass("loading");
        },
        error: function error(data) {
            console.log(data);
        }
    });
});

当几个请求碰巧重叠时，这有可能做错事，所以这样更好：

// Do this once only, then forget about it
$(document)
  .ajaxStart(function() { $('.PAY').addClass("loading"); })
  .ajaxStop(function() { $('.PAY').removeClass("loading"); })

然后在代码中再也不提及.PAY、loading 或ajaxStart。