jQuery - Ajax请求时自动显示Loading效果（设置全局加载框）

2018-10-30 发布：hangge 阅读：8357

当我们在使用 Ajax 进行数据请求过程中，如果希望用户知道当前正在做这个事情，那就需要在页面上显示一个加载框（Loading 效果），然后等数据返回后自动将其隐藏。特别对于一些比较耗时的请求来说，这样做会大大提高用户体验。

要实现这个功能，我们可以在每次请求前手动显示个加载框，等收到数据后又将其隐藏。但如果每个请求要都这么做，就略显麻烦。下面通过样例演示如何全局为每一个请求附带一个 Loading 效果。

1，实现原理

（1）我们可以借助 jQuery 提供的 ajaxSetup() 方法来对 ajax 进行全局的设置。当请求开始时自动将 loading 框显示出来，等请求结束后自动将其隐藏。

（2）这里主要用到 ajaxSetup 中如下几个属性配置：

beforeSend：发送请求前会执行（它会拦截所有的请求）。我们可以在此显示 loading 框。
complete：请求完成时会执行（不管成功失败）。我们可以在此隐藏 loading 框。
error：请求失败时会执行。我们可以在这里记录一些错误信息，或者弹出提示框告知用户。

2，样例代码

页面打开后，我们首先使用 ajaxSetup 进行全局配置，在请求前后自动进行提示框的显示或者隐藏。

Loading 效果我这里使用的是一个第三方的弹出层组件：layer。更详细的用法可以参考我之前写的文章：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.1.1.js" charset="utf-8"></script>
    <script src="layer/layer.js"></script>
    <script type="text/javascript">
      //全局配置
      $.ajaxSetup({
        layerIndex:-1, //保存当前请求对应的提示框index,用于后面关闭使用
        //在请求显示提示框
        beforeSend: function(jqXHR, settings) {
            this.layerIndex = layer.load(1);
        },
        //请求完毕后（不管成功还是失败），关闭提示框
        complete: function () {
            layer.close(this.layerIndex);
        },
        //请求失败时，弹出错误信息
        error: function (jqXHR, status, e) {
          layer.alert('数据请求失败，请后再试!');
        }
      });

      //按钮点击响应
      function btnClick() {
        $.get("data.php", {name: "hangge"}, function(data){
          console.log(data);
        });
      }
    </script>
  </head>
  <body>
    <input type="button" value="请求数据" onclick="btnClick()"/>
  </body>
</html>

3，效果图

（1）点击“请求数据”按钮发起一个简单的 get 请求。

（2）可以看到请求时，页面中央会自动显示一个 loading 效果，并在数据返回后自动消失。