Ajax JavaScript中onprogress事件不触发问题排查求助

问题排查与解决方案 #

1. onprogress不生效的核心原因 #

你当前绑定的xhr.onprogress监听的是服务器响应返回的下载阶段进度，如果你的PHP接口返回的响应内容体积极小，这个事件要么只会触发一次，要么会和onload几乎同时触发，让你感知不到触发效果。
如果你想监听前端数据上传到服务器的进度，需要把事件绑定到xhr.upload对象上：

// 替换你原来的xhr.onprogress绑定为下面的代码
xhr.upload.onprogress = function(e) {
  console.log("appendChild");
  // 上传进度逻辑可以写在这里
};

2. 加载动画的最优实现方案 #

你的需求是提交请求后立刻显示spinner，完全不需要等待progress事件触发，直接在调用xhr.send()之前插入显示spinner的逻辑即可，这是最稳定的实现方式：

let s_form = document.querySelector("#con-form");

s_form.addEventListener("submit", (e) => {
  e.preventDefault();
  // 提前获取提交按钮，保存原始状态
  const submitBtn = s_form.querySelector('button[type="submit"]');
  const originBtnContent = submitBtn.innerHTML;
  // 直接在这里显示加载动画，不用等进度事件
  submitBtn.disabled = true;
  submitBtn.innerHTML = '<span class="spinner"></span> 提交中'; // 替换为你自己的spinner结构

  let name = document.getElementById("name").value;
  let email = document.getElementById("email").value;
  let mobno = document.getElementById("mobno").value;
  let concern = document.getElementById("concern").value;
  const xhr_obj = {
    name: name,
    email: email,
    mobno: mobno,
    concern: concern,
  };
  let data_send = JSON.stringify(xhr_obj);
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "http://localhost/dc/utilities/php/h_f_s.php", true);
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.onload = function () {
    console.log("loaded");
    // 请求完成后恢复按钮状态
    submitBtn.disabled = false;
    submitBtn.innerHTML = originBtnContent;
    // 其余你的业务逻辑
  };
  // 补充异常处理，避免请求失败时按钮一直处于加载状态
  xhr.onerror = xhr.onabort = function() {
    console.error("请求异常");
    submitBtn.disabled = false;
    submitBtn.innerHTML = originBtnContent;
  }
  xhr.send(data_send);
});

3. 补充说明 #

• 如果提交的表单数据体积很小，上传进度事件只会触发一次，和直接在send前执行显示spinner的逻辑没有区别
• 必须补充异常状态处理，覆盖请求失败、用户主动取消请求的场景，避免按钮一直处于禁用加载状态

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