加载按钮 jQuery - JavaScript

在网页中，当我们需要用到异步加载数据时，通常需要添加一个加载按钮来提示用户正在加载数据。jQuery是一种流行的JavaScript库，它提供了许多便捷的方法来添加和处理加载按钮。

安装 jQuery

在使用 jQuery 之前，必须将其加载到页面中。可以从 jQuery 官网 下载最新版本的 jQuery，也可以从 CDN（内容分发网络）上引用。

<!-- 引入 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

添加加载按钮

为了添加一个加载按钮，我们需要在 HTML 中添加一个按钮元素，并使用 jQuery 将其样式设置为“加载中”。

<!-- HTML -->
<button id="load-btn">加载数据</button>

// JavaScript
$('#load-btn').on('click', function() {
  // 将按钮文本设置为“正在加载”
  $(this).text('正在加载...');
  // 发送 AJAX 请求
  $.ajax({
    url: 'https://example.com/data',
    method: 'GET',
    success: function(data) {
      // 请求成功后，将按钮文本设置为“加载数据”
      $('#load-btn').text('加载数据');
      // 处理数据
      console.log(data);
    },
    error: function() {
      // 请求失败后，将按钮文本设置为“加载数据”
      $('#load-btn').text('加载数据');
      console.log('请求失败');
    }
  });
});

进阶用法

除了简单的加载按钮之外，还可以使用 jQuery 实现更多高级功能，例如：

• 禁用按钮：在开始加载数据时，禁用按钮，防止用户重复点击。
• 显示加载进度：使用动画或进度条来显示加载进度。
• 超时处理：如果请求时间超过了预定时间，取消请求并提示用户请求超时。

$('#load-btn').on('click', function() {
  var $btn = $(this);
  $btn.prop('disabled', true); // 禁用按钮
  $btn.text('正在加载...');
  var xhr = $.ajax({
    url: 'https://example.com/data',
    method: 'GET',
    timeout: 5000, // 超时时间为 5 秒
    success: function(data) {
      $btn.prop('disabled', false); // 启用按钮
      $btn.text('加载数据');
      console.log(data);
    },
    error: function() {
      $btn.prop('disabled', false); // 启用按钮
      $btn.text('加载数据');
      console.log('请求失败');
    },
    xhr: function() {
      // 显示加载进度
      var xhr = $.ajaxSettings.xhr();
      if (xhr.upload) {
        xhr.upload.addEventListener('progress', function(event) {
          var percent = event.loaded / event.total * 100;
          $btn.html('加载中... ' + percent.toFixed(0) + '%');
        }, false);
      }
      return xhr;
    }
  });
});

以上是一些基本用法和进阶用法的例子，你可以在实际项目中根据需要使用它们，希望对你有所帮助！