17370845950

用 fetch() 替代表单默认提交需监听 submit 事件并调用 preventDefault()，用 FormData 收集数据，根据后端要求选择 application/x-www-form-urlencoded 或 application/json 格式发送，处理响应、错误及用户反馈，并注意兼容性。

用 fetch() 替代表单默认提交

HTML 表单默认提交会触发页面跳转或刷新，要“无刷新”，核心是阻止这个默认行为，并用 JavaScript 主动发送数据。最直接的方式是监听 submit 事件，调用 event.preventDefault()，再用

fetch() 发送请求。

注意：不要在

上写 action 或 method 后就不管了——即使没跳转，浏览器仍可能按传统方式提交；必须显式拦截。

• 获取表单元素：const form = document.querySelector('form');
• 绑定提交事件：form.addEventListener('submit', handleSubmit);
• 在 handleSubmit 中调用 event.preventDefault()
• 用 new FormData(form) 快速收集所有字段值（支持 file、checkbox 等）

fetch() 提交时 content-type 的选择

后端接收方式决定前端该发什么格式。常见两种：

• 发 application/x-www-form-urlencoded（类似传统表单）：用 FormData 即可，fetch 会自动设对 Content-Type，且兼容文件上传
• 发 application/json：需手动 JSON.stringify()，并显式设置 headers: { 'Content-Type': 'application/json' }；但此时 FormData 不能直接用，得先转成普通对象

错误示例：fetch(url, { method: 'POST', body: JSON.stringify(data) }) 却没设 Content-Type，后端（如 Express）可能收不到 req.body。

处理响应和用户反馈

无刷新不是“没反应”，而是把原来页面跳转后的提示，换成当前页内的状态更新。容易忽略的是错误边界：

• fetch() 成功发出请求 ≠ 后端业务成功；需检查 response.ok 和自定义返回字段（如 data.code === 200）
• 网络失败、超时、CORS 报错不会进 .catch()，除非请求根本没发出去；response.status 为 4xx/5xx 仍会走 .then()
• 提交中应禁用按钮（button.disabled = true），避免重复点击；成功/失败后恢复，并清空或重置表单（form.reset()）

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const btn = e.target.querySelector('button');
  btn.disabled = true;

  try {
    const res = await fetch('/api/login', {
      method: 'POST',
      body: new FormData(form)
    });

    const data = await res.json();
    if (res.ok && data.success) {
      alert('登录成功');
      form.reset();
    } else {
      alert(data.message || '提交失败');
    }
  } catch (err) {
    alert('网络异常，请重试');
  } finally {
    btn.disabled = false;
  }
});

兼容性与降级提醒

fetch() 在 IE 完全不支持，iOS Safari 10.1+ 才支持 FormData 上传文件。如果项目需兼容老环境：

• 用 XMLHttpRequest 手动封装（麻烦但可控）
• 引入 whatwg-fetch polyfill（仅解决 fetch 语法，不解决 FormData 文件上传的兼容问题）
• 服务端接口最好同时支持 GET 查询参数和 POST 表单数据，便于极端情况 fallback

真正上线前，务必在目标设备上测试“带文件的表单提交”是否真能无刷新完成——这是最容易翻车的环节。