JQuery发起POST API请求时显示load spinner加载动画的实现咨询

架构老林

2026-10-6

实现步骤

第一步：先在页面中添加加载spinner元素，默认设置为隐藏状态，示例如下：

<div id="loading-spinner" style="display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9999;">
  <!-- 此处可替换为你自己的加载动画资源，比如GIF图或者CSS动画效果 -->
  加载中...
</div>

第二步：修改原有JS代码，调整点如下：
1. 点击按钮后立即显示spinner
2. 补全fetch的POST请求配置（原有代码默认是GET请求，不符合需求）
3. 无论请求成功失败，结束后都隐藏spinner
4. 修正alert弹窗和页面刷新的执行顺序

修改后的完整代码：

$('#add').click(function() {
  // 点击按钮后立即显示加载动画
  $('#loading-spinner').show();

  fetch("你的实际业务请求地址", {
    method: 'POST', // 声明为POST请求
    headers: {
      'Content-Type': 'application/json',
      // 如有CSRF Token等校验头可在此处添加
    },
    body: JSON.stringify({
      // 此处填写你需要提交的请求参数
    })
  })
  .then(response => response.json())
  .then(result => {
    // 原有1250ms延迟如果是为了让用户看清加载动画可以保留，不需要可以直接删掉setTimeout包装
    setTimeout(function() {
      // 隐藏加载动画
      $('#loading-spinner').hide();
      alert("Item has been added successfully");
      location.reload();
    }, 1250);
  })
  .catch(error => {
    console.log('error', error);
    // 请求报错时也要隐藏加载动画，可根据需要加错误提示
    $('#loading-spinner').hide();
    alert('添加失败，请稍后重试');
  });
});