如何禁用ajax请求的页面答案

【问题标题】：How to disable a page on ajax request如何禁用ajax请求的页面
【发布时间】：2016-07-29 12:50:04
【问题描述】：

您好，我的要求是在发送 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

使用上面的代码，sn-p ajax 加载器正在工作，但我的页面在微调器加载时没有被禁用。请指导我如何在加载 ajax 时禁用页面。

【问题讨论】：

将async:true添加到ajax选项；它会阻止页面；
您可以参考this 的帖子了解详情。它对我有用。
@itzmukeshy7 async: false 自 jQuery 1.8 起已弃用。 OP 应该使用覆盖来阻止除微调器之外的所有 UI。如果您不想自己动手，甚至还有一个插件：malsup.com/jquery/block

标签： javascript jquery ajax

【解决方案1】：

这是在 ajax 响应之前显示微调器的示例代码：

HTML Spinner 代码：

<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");
        }
    });

【讨论】：

考虑也添加complete:function(){$("#loading-overlay").hide();}或将$("#loading-overlay").hide();添加到error:function(){}；
对于那些希望 ajax 调用的模态不仅适用于视口的整个屏幕，请使用 position:fixed; 而不是 position:absolute;

【解决方案2】：

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

【讨论】：

你能帮我看看如何在 ajax 上添加叠加层，从 spinner 开始