如何用JavaScript捕获表单提交的HTTP响应状态码？

要捕获表单提交后的响应状态码，首先得解决传统表单同步提交的问题——默认情况下表单提交会直接刷新页面，根本没机会拿到响应数据。所以最佳方案是阻止表单的默认提交行为，改用异步请求发送数据，现在最推荐用现代的Fetch API来实现，代码简洁还支持Promise/async-await，比老的XMLHttpRequest好用多了。

实现思路 #

1. 监听表单的submit事件，调用preventDefault()阻止页面跳转
2. 用FormData自动收集表单里的所有输入数据，不用手动拼接参数
3. 用Fetch API异步发送请求，然后通过response.ok判断请求是否成功（状态码200-299都算成功），也可以直接获取response.status拿到具体状态码

完整代码示例 #

// 获取页面上的表单元素
const form = document.querySelector('form');

// 监听表单提交事件
form.addEventListener('submit', async (e) => {
  // 阻止默认的同步提交行为（避免页面刷新）
  e.preventDefault();

  // 收集表单中的所有数据，包括文本输入、文件等
  const formData = new FormData(form);

  try {
    // 发送异步请求，复用表单的action和method属性
    const response = await fetch(form.action, {
      method: form.method,
      body: formData
    });

    // 判断请求是否成功：response.ok等价于状态码在200-299之间
    if (response.ok) {
      console.log('请求提交成功！');
      // 这里可以添加成功后的逻辑，比如给用户弹出提示
    } else {
      console.log(`请求失败，状态码：${response.status}`);
      // 失败逻辑，比如提示用户提交出错
    }
  } catch (error) {
    // 捕获网络层面的错误，比如断网、请求无法到达服务器
    console.error('提交时发生网络错误：', error);
  }
});

为什么这是最佳方案？ #

• Fetch API是现代浏览器的标准API，语法简洁，结合async/await写异步代码像同步一样直观，比老的XHR更容易维护
• FormData自动处理表单数据，不管是普通文本还是文件上传都能轻松搞定，不用自己手动拼接application/x-www-form-urlencoded格式的字符串
• 完全保留了原表单的action和method属性，代码复用性强，不用硬编码请求地址和方法

注意事项 #

• 如果目标请求地址和当前页面域名不同，需要服务器端配置CORS（跨域资源共享），否则会触发跨域错误
• 如果需要兼容非常老的浏览器（比如IE），可以考虑用XMLHttpRequest替代Fetch，但现在大部分项目已经不用考虑IE了

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