AJAX表单提交后如何设置延迟刷新并正确添加加载进度条？

1 延迟4秒刷新功能问题修复 #

你现有代码的setTimeout(cbutton, 4000)逻辑是AJAX请求成功后4秒重新调用提交函数，而非执行页面刷新，因此无法实现预期效果，需将setTimeout的回调替换为页面刷新逻辑。

2 加载进度条实现说明 #

进度条不需要放在function (msg)之后，正确的触发逻辑是：

• AJAX请求发起前显示进度条
• 请求过程中更新进度
• 请求完成后先让进度条走满，再执行延迟刷新逻辑

2.1 新增HTML进度条结构 #

你可以把这段代码放在页面顶部或者表单附近的任意位置，默认状态隐藏：

<div id="loading-bar" style="display: none; height: 4px; background: #1890ff; position: fixed; top: 0; left: 0; width: 0; z-index: 9999; transition: width 0.2s linear;"></div>

3 完整修改后的JS代码 #

var barray = [];

function cbutton() {
  // 补充接收单选框值的变量，修复原有代码无接收的问题
  const submitUrl = $('input:radio[name="cheking"]:checked').val();
  var varies = $("#fromdate").val();
  var varies2 = $("#todate").val();
  if (varies == "" || varies2 == "") {
    alert("Please fill in all 2 fields first and then submit again");
  } else {
    barray.push(varies + "~" + varies2);
    // 请求发起前初始化并显示进度条
    const $loadingBar = $('#loading-bar');
    $loadingBar.show().css('width', '0%');
    let progress = 0;
    // 模拟加载进度更新
    const progressTimer = setInterval(() => {
      progress += Math.random() * 15;
      if (progress > 80) progress = 80;
      $loadingBar.css('width', progress + '%');
    }, 200);

    $.ajax({
      type: "POST",
      url: submitUrl,
      data: {
        fromdate: varies,
        todate: varies2
      }
    }).done(function(msg) {
      // 请求成功后进度条走满
      clearInterval(progressTimer);
      $loadingBar.css('width', '100%');
      // 等待进度条动画完成后隐藏，再执行4秒延迟刷新
      setTimeout(() => {
        $loadingBar.hide();
        setTimeout(() => {
          window.location.reload();
          // 如果仅需要局部刷新，可替换上面的页面刷新逻辑为你的局部数据更新代码
        }, 4000);
      }, 100);
    }).fail(function() {
      // 请求失败的兼容处理
      clearInterval(progressTimer);
      $loadingBar.css('width', '100%').hide();
      alert('请求失败，请重试');
    });
  }
}

内容的提问来源于stack exchange，提问作者stoperan