如何在Ajax请求中禁用页面

Question

您好，我的要求是当发送Ajax请求时显示加载旋转器，并在页面不可点击时禁用它。我已经包含了下面给出的代码：

$('#expressShippingCalculation input').change ->
if $('#shipping_method4').is(':checked')
  additionalAmountExpress()
  data = $('#shippingDetails').serialize()
  expressValue = true
else 
  $('#additional-charge').hide()
  expressValue = false
$.ajax
  url: '/update_express_shipping?expressShipping=' +expressValue
  type: 'PATCH'
return

$(document).ajaxStart ->
  $('#spinner').show()
  return
$(document).ajaxComplete ->
  $('#spinner').hide()
  return
$(document).ajaxError ->
  $('#spinner').hide()
  return

使用上述代码片段，Ajax加载器正在工作，但当旋转器正在加载时，我的页面不会被禁用。请指导我如何在Ajax加载时禁用页面。

- Dinshaw Raje

---

将 async:true 添加到 ajax 选项中，它将阻止页面。 - itzmukeshy7

你可以参考这篇帖子了解详情。对我有用。 - The KNVB

async: false 已经自 jQuery 1.8 起被弃用。开发者应该使用遮罩来阻止所有 UI，除了旋转图标。甚至有一个插件可供使用，如果您不想自己编写：http://malsup.com/jquery/block/ - Andy

Answer 1

以下是显示加载动画直到Ajax响应的示例代码：

HTML加载动画代码：

<div id="loading-overlay">
    <div class="loading-icon"></div>
</div>  

CSS：

#loading-overlay {
    position: absolute;
    width: 100%;
    height:100%;
    left: 0;
    top: 0;
    display: none;
    align-items: center;
    background-color: #000;
    z-index: 999;
    opacity: 0.5;
}
.loading-icon{ position:absolute;border-top:2px solid #fff;border-right:2px solid #fff;border-bottom:2px solid #fff;border-left:2px solid #767676;border-radius:25px;width:25px;height:25px;margin:0 auto;position:absolute;left:50%;margin-left:-20px;top:50%;margin-top:-20px;z-index:4;-webkit-animation:spin 1s linear infinite;-moz-animation:spin 1s linear infinite;animation:spin 1s linear infinite;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }  

AJAX:

前端网页开发技术，用于在不刷新整个页面的情况下，与服务器异步交换数据并更新部分网页内容。

$.ajax({
        url: "YOUR PATH"
        type: "PATCH",
        data: "YOUR DATA HERE",
        beforeSend: function(){
            $("#loading-overlay").show();
        },
        success: function (data, textStatus, jqXHR) {
            $("#loading-overlay").hide();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            $("#loading-overlay").hide(); 
            alert("something went wrong");
        }
    });

- Dhaval Bharadva

---

考虑添加 complete:function(){$("#loading-overlay").hide();} 或将 $("#loading-overlay").hide(); 添加到 error:function(){} 中； - itzmukeshy7

对于那些希望在整个屏幕而不仅仅是视口中使用ajax调用的模态框，请使用position:fixed;而不是position:absolute;。 - Mycodingproject

Answer 2

您可以添加一个“覆盖层”元素，它覆盖整个屏幕，并将其可见属性设置为false，在ajax开始时启用。

- A Biswas

---

请问您能帮我解决如何在Ajax开始时添加覆盖层和旋转图标的问题吗？ - Dinshaw Raje