javascript - 处理请求时使屏幕变黑

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');
                },

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