如何在 jquery 中添加 ajax 加载图标

📌 相关文章

📜 如何在 jquery 中添加 ajax 加载图标 - Javascript (1)

📅 最后修改于: 2023-12-03 15:38:18.389000 🧑 作者: Mango

在 web 开发中，我们经常要使用 jQuery 来发送 ajax 请求，以更新页面内容或从后端获取数据。但在这个过程中，用户可能需要等待一段时间，因为页面并没有实时反馈数据的加载情况。因此，为了提高用户体验，我们需要添加一个 ajax 加载图标来告诉用户正在加载中。

添加图标

在 jQuery 中添加一个 ajax 加载图标非常简单，我们只需要在发送 ajax 请求前展示图标，在请求完成后隐藏图标即可。

HTML

首先，在 HTML 页面中我们需要添加一个 div，作为我们的加载图标的容器。

<div id="loading"></div>

这个 div 的样式可以自己定义，例如：

#loading {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

jQuery

接下来，在 jQuery 中添加加载图标的代码。

首先，我们需要在发送 ajax 请求前展示加载图标，代码如下：

$(document).ajaxStart(function() {
  $('#loading').show();
});

然后，在请求完成后隐藏图标，代码如下：

$(document).ajaxStop(function() {
  $('#loading').hide();
});

这两段代码分别使用了 ajaxStart 和 ajaxStop 方法，它们会在页面中所有的 ajax 请求开始和结束时触发。

完整代码

最终，我们的代码应该是这样的：

<!DOCTYPE html>
<html>
<head>
  <title>Ajax Loading Icon</title>
  <style>
    #loading {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ajaxStart(function() {
      $('#loading').show();
    });
    $(document).ajaxStop(function() {
      $('#loading').hide();
    });
  </script>
</head>
<body>
  <div id="loading">Loading...</div>
  <button id="btn">Send Ajax Request</button>
  <script>
    $('#btn').click(function() {
      $.get('https://jsonplaceholder.typicode.com/todos', function(data) {
        console.log(data);
      });
    });
  </script>
</body>
</html>

总结

在本文中，我们学习了如何在 jQuery 中添加 ajax 加载图标，提高了用户体验。我们的代码适用于所有的 ajax 请求，通过分别展示和隐藏加载图标，让用户清楚地知道请求正在进行中，避免了用户的疑惑和不必要的等待。