Question

在ajax调用完成之前，如何禁止所有链接被触发？

我需要在.(click)个事件和.on('keyup')触发器上发生这种情况。

我想要的就是这样;

- 触发Ajax链接（通过点击或键盘）

- Ajax调用运行（并且正在运行 - 所有链接都被禁用）

- Ajax调用完成并重新启用链接。

Answer 1

您可以添加微调器并在前景中显示微调器，直到您的ajax请求成功为止。这是一个示例代码。这是一个例子。

function OnAjaxStart(ajaxContext) {
$("#spinner").show();
$("a").unbind("click");
$("a").unbind("keyup");
}

function OnAjaxComplete(ajaxContext) {
$("#spinner").hide();
}


function DisplayDataById(actionUrl, data) {
OnAjaxStart();

var request = $.ajax({
url: actionUrl,
data: { data: data},
cache: false
});

request.done(function (data) {
$('#' + divName).empty().html(data);
OnAjaxComplete();
});
}

以下是微调器HTML：

<div id="spinner" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
  top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
  opacity: .8; filter: alpha(opacity=70); display: none">
  <p style="position: absolute; top: 30%; left: 45%; color: White;">
    Please wait ...<img src="@Url.Content("~=""/images/loading-image.gif")" alt="Loading">
  </p>
</div>

Answer 2

/*  CSS */
#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000000;
}

在ajax调用中使用此

overlay = $("<div id='overlay'></div>").prependTo('body');
    $(document).on("keydown",function(objEvent) {
    if (objEvent.keyCode == 9) {  //tab pressed
        objEvent.preventDefault(); // stops its action
    }
   });

在完成ajax呼叫后，请使用此

overlay.remove();
$(document).off("keydown");

禁用所有单击/加密事件，直到ajax调用完成

2 个答案: