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。

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

1 个答案: