Question

我在带有一些按钮的页面上有一些控件。单击按钮时，将向服务器发出请求，并在收到响应时，按钮文本将更新（开/关）。我现在的方式是点击时按钮保持活动状态，用户可以多次点击它。但是这会导致请求一个接一个地堆积而不被执行，这最终冻结或减慢了页面和服务器的速度。我希望屏幕在初始按钮点击时变黑并保持不变，直到请求结束并产生一些结果，然后用户再次点击按钮。在这种情况下，如何将类似模态窗口的内容与正在处理请求的消息结合起来？

非常感谢帮助。

提前致谢。

Answer 1

是的，最近我有这种类型的问题。要修复此问题，您需要添加一个加载程序，该加载程序将在处理Ajax时显示在您的页面中添加： -

 <div id="blockDiv" class="hide">
    <div class="" style="padding: 0px; margin: 0px; text-align: center; color: rgb(0, 0, 0); border: 3px solid rgb(170, 170, 170); width: 100%; height: 100%; position: fixed; top: 0%; background: rgb(20, 14, 51) none repeat scroll 0% 0%; opacity: 0.5; z-index: 1004; cursor: wait; right: 0px;"></div>
    <div class="blockUI blockMsg blockPage " style="padding: 0px; margin: 0px; top: 50%; color: rgb(0, 0, 0); border: 3px solid rgb(170, 170, 170); font-weight: normal; background-color: rgb(255, 255, 255); font-size: 20px; left: 35%; text-align: center; z-index: 999999 ! important; position: fixed; width: 30%;"><img src="http://deepakkit.xtgem.com/files/loading.gifjsessionidURgz41CHGWcq8M1BI6qdZQ.gif" style="height:25px;">Just a moment</div>
</div>

添加此css： -

.hide{
        display: none;
    }

在Ajax中添加： -

 beforeSend : function() {
                    $('#blockDiv').removeClass('hide');
                },
                complete: function () {
                    $('#blockDiv').addClass('hide');
                },

然后我们的问题将得到解决。

Answer 2

就像我在评论中所说，你可以创建一个绝对叠加div，默认隐藏。

然后在beforeSend: Ajax选项上显示它并将其隐藏在.always()事件中。

检查以下示例：

$(function() {
  $.ajax({
    beforeSend: function() {
      $('.overlay').fadeIn();
    }
    //if using jQuery < 3.0, remove always and use this
    //,complete: function() {
    //   $('.overlay').fadeOut();
    //}
  }).always(function() {
    alert('I have finished!');
    $('.overlay').fadeOut();
  });
});

.overlay {
  display: none;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 999;
  background: rgba(0, 0, 0, 0.65);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="overlay"></div>
</div>

在处理请求时将屏幕变黑

2 个答案: