表单防重复提交需三重保障：前端禁用按钮防误点、fetch+AbortController中止并发请求、服务端幂等性校验（如idempotency-key）。三者缺一不可，仅前端限制不可靠。
表单提交后禁用提交按钮
用户点击提交后若不阻止二次点击，极易触发重复请求。最直接的做法是在 submit 事件中禁用按钮，并在必要时恢复（如校验失败）。
- 仅禁用
<button type="submit"></button>或<input type="submit">，禁用<input type="button">无实际效果 - 禁用前建议先检查
form.checkValidity()，避免误禁（如前端校验未通过时不该锁死） - 服务端返回错误需手动启用按钮，否则用户无法重试：
document.querySelector('button[type="submit"]').disabled = false;
使用 fetch + AbortController 防止并发提交
当表单用 JavaScript 提交（如 fetch），多次快速点击会发出多个请求。用 AbortController 可主动中止前一次未完成的请求。
- 每次提交前新建
new AbortController()，并将signal传入fetch选项 - 保存上一个
controller实例，提交前调用abort()终止旧请求 - 注意：
AbortError是预期异常，需在catch中过滤，避免误报业务错误let currentController = null; function handleSubmit() { if (currentController) currentController.abort(); currentController = new AbortController(); fetch('/api/submit', { method: 'POST', signal: currentController.signal, body: new FormData(document.querySelector('form')) }).catch(err => { if (err.name !== 'AbortError') console.error(err); }); }
后端配合：接收端校验幂等性
前端控制不可靠，必须依赖服务端兜底。常见做法是让每次提交携带唯一标识（如客户端生成的 idempotency-key），后端记录并拒绝重复键。
- 前端可生成短 UUID 或时间戳 + 随机数：
crypto.randomUUID()（现代浏览器支持）或Date.now() + Math.random().toString(36).substr(2, 9) - 将该值作为请求头：
headers: { 'Idempotency-Key': key } - 后端需在 DB 或 Redis 中缓存该 key 的处理状态，有效期建议 24 小时以上，覆盖网络超时重试场景
避免 location.reload() 导致的重复 POST
提交成功后若用 location.reload() 或直接跳转到相同 URL，用户按 F5 刷新会重新提交表单（浏览器提示“确认重新提交”）。这不是 bug，而是 HTTP 规范行为。
立即学习“前端免费学习笔记（深入）”；
- 成功后应使用
location.href = '/success'或history.replaceState()替换当前历史项 - 若必须跳转回原页（如编辑页），改用
GET请求跳转，不要保留 POST 状态 - 服务端响应 303 See Other 是更规范的方案，强制浏览器用 GET 重定向，但需前后端协同
AbortController 解决 JS 提交并发，而幂等 key 是唯一能真正防止数据重复落库的手段。三者缺一不可，尤其不能只做前端限制。 
