表单提交时页面跳转是因浏览器默认触发完整提交，需用event.preventdefault()在submit事件处理器开头阻止；fetch需用formdata构造数据并设method:"post"；后端须配置对应中间件解析不同content-type。
表单提交时页面为什么会跳转或刷新
浏览器默认会把 <form></form> 当作一个独立交互单元，只要没明确阻止，点击 <input type="submit"> 或回车就会触发完整页面提交——这是最常被忽略的起点。
常见错误现象：fetch 发了请求但页面闪一下就空白了；控制台没报错，但 console.log 只执行了一次；用 event.preventDefault() 却忘了加在正确位置。
- 必须给
submit事件绑定处理函数，不是click -
event.preventDefault()要放在函数最开头，否则可能来不及拦截 - 如果用了
button[type="submit"]，也一样触发submit事件，别只盯着input
用 fetch 提交表单数据要注意哪些参数
原生 fetch 不会自动序列化表单字段，直接传 form 元素会报错：TypeError: Request with GET/HEAD method cannot have body（尤其你误设了 method: "GET" 还带 body）。
使用场景：需要异步提交、不跳转、还要读响应内容（比如返回 JSON 校验结果）。
立即学习“前端免费学习笔记（深入）”；
- 用
new FormData(formElement)构造数据，它能自动提取所有name属性字段 -
POST请求必须显式设置method: "POST"，不能依赖表单method属性 - 不要手动设
Content-Type头——FormData会自动生成带 boundary 的multipart/form-data；若要application/json，得先用Object.fromEntries(new FormData(form))转对象再JSON.stringify
form.addEventListener("submit", async (e) => {
e.preventDefault();
const data = new FormData(form);
const res = await fetch("/api/login", {
method: "POST",
body: data // 不要加 headers
});
});
后端接收不到字段或值为空怎么办
前端看着数据发出去了，但 req.body 是空对象，常见于 Express、Koa 等 Node 框架，本质是服务端没配对的解析中间件。
参数差异：不同 Content-Type 对应不同解析方式——application/x-www-form-urlencoded 和 multipart/form-data 都要单独处理，不能只靠一个 bodyParser.json()。
- Express 用户必须加
express.urlencoded({ extended: true })接收普通表单字段 - 上传文件时还要加
multer或类似中间件，urlencoded对multipart完全无效 - 如果前端用
JSON.stringify发数据，后端必须用bodyParser.json()，且前端要设headers: {"Content-Type": "application/json"}
按钮禁用和加载状态怎么避免重复提交
用户手快连点两次，后端收到两条几乎一样的请求，日志里看到重复订单或重复注册——这不是网络慢的问题，是 UI 层没做防抖控制。
性能影响：单纯用 disabled 是最轻量方案，但要注意恢复逻辑；用 CSS 类模拟禁用容易漏掉键盘回车或辅助技术访问。
- 提交开始就设
button.disabled = true，别只改样式 - 无论成功失败，都要在
finally块里恢复按钮状态，否则出错后用户再也点不了 - 如果按钮文字要变（比如“提交中…”），记得同时更新
aria-label，否则屏幕阅读器用户不知道状态变化
FormData 自动加的 boundary、后端中间件对 Content-Type 的严格匹配、还有 submit 事件那毫秒级的拦截时机。这些地方一漏，调试起来就容易绕圈子。 
