用 fetch() 替代表单默认提交需监听 submit 事件并调用 preventdefault()，用 formdata 收集数据，根据后端要求选择 application/x-www-form-urlencoded 或 application/json 格式发送，处理响应、错误及用户反馈，并注意兼容性。
用 fetch() 替代表单默认提交
HTML 表单默认提交会触发页面跳转或刷新，要“无刷新”，核心是阻止这个默认行为，并用 JavaScript 主动发送数据。最直接的方式是监听 submit 事件，调用 event.preventDefault()，再用 fetch() 发送请求。
注意：不要在 <form></form> 上写 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-fetchpolyfill（仅解决fetch语法，不解决FormData文件上传的兼容问题） - 服务端接口最好同时支持
GET查询参数和POST表单数据，便于极端情况 fallback
真正上线前，务必在目标设备上测试“带文件的表单提交”是否真能无刷新完成——这是最容易翻车的环节。
