AJAX显示加载中并弹出图层遮挡页面的实现示例

这里就为你详细讲解一下“AJAX显示加载中并弹出图层遮挡页面的实现示例”的完整攻略。

1. 显示加载中

在前端页面中，我们可以通过动态添加HTML和CSS来实现一个加载中的提示框，其中HTML部分可以用如下代码：

<div class="loading-overlay">
  <div class="loading-icon"></div>
  <div class="loading-text">LOADING</div>
</div>

CSS部分可以用如下代码：

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}
.loading-text {
  margin-left: 10px;
  font-size: 24px;
  font-weight: bold;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

上面的代码中，.loading-overlay是一层半透明黑色背景， .loading-icon是一个旋转的圆形，.loading-text则是提示文字。

当需要发送 AJAX 请求时，可以先显示这个加载中的提示框。在 AJAX 请求开始和结束时，需要分别进行相应的处理。可以使用以下代码来监听页面中 AJAX 请求的开始和结束：

// 发送 AJAX 请求前
$(document).ajaxSend(function(){
  $('.loading-overlay').show();
});
// AJAX 请求完成后
$(document).ajaxComplete(function(){
  $('.loading-overlay').hide();
});

上面的代码中，.loading-overlay是上面所示的加载中提示框的类选择器，show()方法可以显示该元素，hide()方法可以隐藏该元素。

1. 弹出图层遮挡页面

有时在 AJAX 请求开始时，需要禁用页面上的所有控件，以防用户误操作。在原生的 JavaScript 中，可以通过以下代码来禁用 body 元素中的所有控件：

document.body.style.pointerEvents = 'none';

但是，如果仅仅用上面的代码禁用页面中的控件，页面的布局不会受到影响，很容易出现元素错位等问题。为了避免这种情况发生，需要添加一层遮罩图层。

图层的 HTML 和 CSS 可以使用以下代码：

<div class="overlay"></div><!--半透明层-->

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  z-index: 999;
}

当需要禁用页面中的所有控件时，可以将该遮罩层插入到 body 的最后一位，并设置其 display 属性为 block，如下代码：

$('body').append('<div class="overlay"></div>');
$('.overlay').show();

注意，要先将其 display 属性设置为 block，再进行插入操作，否则在某些浏览器中会出现“插入失败”的情况。

当 AJAX 请求结束时，需要将该遮罩层移除，同时恢复页面中的控件，可以使用以下代码：

$('.overlay').remove();
document.body.style.pointerEvents = 'auto';

上面的代码中，.overlay是上面所示的遮罩层的类选择器，remove()方法可以将该元素移除，document.body.style.pointerEvents = 'auto'可以恢复所有控件的操作。