避免HTML表单由于多重提交引发业务异常-html教程-PHP中文网

必须前端锁ui、中止并发请求、后端幂等校验三者同时生效，漏一环即导致重复订单等故障；submit事件需批量禁用所有提交控件并配合checkvalidity、preventdefault；fetch须用abortcontroller中止前序请求；submit_token须后端生成、绑定session、一次性消费且校验加原子锁。

避免html表单由于多重提交引发业务异常

单纯禁用按钮不能避免业务异常，必须前端锁 UI + 中止并发请求 + 后端幂等校验三者同时生效。漏掉任意一环，都可能造成订单重复创建、扣款两次、库存超卖等真实故障。

submit 事件里必须批量禁用所有 type="submit" 控件

只禁用当前点击的按钮或只写 document.getElementById('btn').disabled = true 是无效的。用户按回车、点“保存并继续”、甚至用 JS 调用 form.requestSubmit() 都会绕过这个限制。

正确做法是：在 form.addEventListener('submit', ...) 的第一行，用 form.querySelectorAll('button[type="submit"], input[type="submit"]') 获取全部提交控件，统一设 disabled = true
禁用前建议调用 form.checkValidity()，校验失败时不锁按钮，避免用户卡死在错误表单上
禁用后必须配 event.preventDefault()，否则禁用动作还没生效，表单已发出原生请求
不要用内联 onclick="this.disabled=true" —— 它不响应回车，也不管其他按钮，且破坏可维护性

fetch 提交时必须用 AbortController 中止前序请求

禁用按钮只拦住 UI 层点击，但 fetch 发起后网络延迟导致多次请求已发出，按钮灰了后端还在收包。这是高频重复提交最隐蔽的来源。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

声明一个全局变量 currentController，类型为 AbortController
每次提交前先执行 currentController?.abort()，再新建实例并传入 signal 选项
catch 块中必须过滤 AbortError，否则会把中止当业务错误上报
IE 不支持 AbortController，老项目需降级为 Promise.race([fetch(), timeoutPromise])

后端 submit_token 必须绑定 session 且一次性消费

前端任何控制都可被绕过，真正兜底的是服务端 token 校验。用 Math.random() 或时间戳生成的隐藏字段值毫无防护力。

token 必须由后端生成，带签名、有时效（5–15 分钟），且绑定当前 session_id 和表单类型（如 order_form）
提交时校验通过后，必须立即在服务端标记为“已使用”，再次提交返回 400 Bad Request
若用 fetch 提交，需手动取 document.querySelector('[name="submit_token"]').value 拼进 body，不能依赖表单自动携带
别信“前端禁用+token”就万事大吉 —— 若 token 校验逻辑没加锁（如 Redis SETNX 或 DB 行锁），高并发下仍可能穿透

最容易被忽略的是：abort 后没恢复按钮、token 校验没加原子操作、以及 PRG 模式下重定向前业务未真正落库。这三处任一出错，都会让整套防重机制形同虚设。