防止html表单重复提交需前后端协同：前端禁用按钮+状态标记，后端校验一次性token、采用prg模式、限制请求频率并设计幂等接口及数据库唯一约束。
防止HTML表单重复提交，核心不是靠表单标签本身，而是结合前端控制、后端校验和交互设计共同实现。HTML的<form></form>标签没有内置防重提机制，必须主动添加防护措施。
禁用提交按钮 + 状态标记
用户点击提交后立即禁用按钮，避免视觉误操作。同时设置标志位防止JS多次触发提交逻辑。
- 给提交按钮添加
id="submitBtn"，提交时执行btn.disabled = true - 配合
data-submitted="true"属性或全局变量isSubmitting = true做二次拦截 - 注意：仅前端禁用不可靠，必须配合后端校验，否则绕过JS仍可重发
添加一次性Token（CSRF Token）
服务端在渲染表单时生成唯一token，随表单提交；后端验证后立即作废该token。
- 表单中插入隐藏字段：
<input type="hidden" name="token" value="abc123..."> - 后端收到请求后比对token有效性，并在验证通过后清空或标记为已使用
- 适用于登录、下单、评论等关键操作，能有效阻断自动脚本或F5刷新重提
使用Post-Redirect-Get（PRG）模式
提交成功后不直接返回结果页，而是返回一个302重定向，让浏览器用GET重新加载页面。
- 用户刷新结果页时，只会重复GET请求，不会再次提交POST数据
- 需后端在处理完POST后返回
Location头，前端无需额外代码 - 搭配session或URL参数传递提示信息（如“提交成功”），避免重复操作感知
限制请求频率与幂等性设计
后端对同一用户/会话/业务ID的相似请求做时间窗口内去重。
- 记录最近一次提交的
userId+actionType+timestamp哈希，在5秒内相同则拒绝 - 关键接口设计为幂等：例如用唯一订单号作为请求ID，重复提交返回相同结果而非新建记录
- 数据库层面加唯一索引（如
user_id + order_time组合约束），从源头拦截重复数据
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
