巧用ajax请求服务器加载数据列表时提示loading的方法

下面是详细的攻略：

使用ajax请求服务器加载数据列表时提示loading的方法

在使用ajax请求服务器加载数据列表时，如果列表数据较多，可能会出现等待时间较长的情况，这时候就需要给用户一个提示，表明正在加载数据。一般情况下，我们会使用loading图标来表示数据正在加载中。

1. 简单的loading图标

在请求数据之前，在页面上添加一个loading图标，用来表示数据正在加载中，一旦请求完成，就将loading图标隐藏起来。

<!--在页面上添加loading图标-->
<div id="loading">
  <img src="./loading.gif" alt="loading">
</div>

$(document).ready(function() {
  //在使用ajax请求数据之前，将loading图标显示出来
  $("#loading").show();

  // ajax请求数据的代码
  $.ajax({
    url: "./data",
    success: function(data) {
      //数据请求成功后，将loading图标隐藏
      $("#loading").hide();
      //渲染数据列表
    },
    error: function() {
      //数据请求失败后，将loading图标隐藏
      $("#loading").hide();
      alert("数据加载失败！");
    }
  });
});

这种方法比较简单，但用户体验可能不是很好，因为loading图标一直存在于页面上，用户有时候并不知道何时会请求完成。

2. 通过定时器控制loading图标显示和隐藏

这种方法可以让loading图标在请求数据过程中动态的显示和隐藏。例如我们设置一个时间，如果请求的数据在该时间之内返回，则不显示loading图标，否则在超时时间内没有返回数据，则显示loading图标。

<!--在页面上添加loading图标-->
<div id="loading">
  <img src="./loading.gif" alt="loading">
</div>

$(document).ready(function() {
  var timeout = 1000; //超时时间
  var loadingTimer; //定时器

  //使用ajax请求数据
  function fetchData() {
    //在使用ajax请求数据之前，将loading图标显示出来
    $("#loading").show();
    $.ajax({
      url: "./data",
      success: function(data) {
        //数据请求成功后，清除定时器，并将loading图标隐藏
        clearTimeout(loadingTimer);
        $("#loading").hide();
        //渲染数据列表
      },
      error: function() {
        //数据请求失败后，将loading图标隐藏
        $("#loading").hide();
        alert("数据加载失败！");
      }
    });
  }

  //开启定时器
  loadingTimer = setTimeout(function() {
    //请求超时后显示loading图标
    $("#loading").show();
  }, timeout);

  fetchData();
});

上面代码中，我们设置了一个名为loadingTimer的定时器，用来控制loading图标的显示和隐藏。在使用ajax请求数据之前，我们先开启loadingTimer定时器，并设置一个超时时间timeout。如果在超时时间内数据请求完成，我们就清除loadingTimer定时器，并将loading图标隐藏。如果在超时时间内数据请求没有完成，则显示loading图标。

以上是两个简单的示例，可以根据具体的业务需求进行调整。希望能对你有所帮助！