提交后禁用按钮可防止多次点击，但无法阻止刷新提交；2. 使用一次性Token机制能有效防止重复提交，服务器生成唯一Token并验证后清除，确保表单仅提交一次。
表单重复提交是Web开发中常见的问题，尤其在网络延迟或用户误操作的情况下容易发生。当用户点击提交按钮多次，或者刷新已提交的页面时，可能导致数据重复插入数据库，造成数据冗余甚至业务逻辑错误。下面介绍几种有效的防止HTML表单重复提交的方法及实现代码。
1. 提交后禁用提交按钮
用户点击提交按钮后，立即禁用该按钮，防止多次点击。
// 示例代码： ```html <script> function handleSubmit() { const btn = document.getElementById('submitBtn'); if (btn.disabled) { return false; // 已提交，阻止再次提交 } btn.disabled = true; btn.textContent = '提交中...'; return true; // 允许表单提交 } </script> ```这种方法简单有效，适合大多数场景，但不能防止用户刷新页面导致的重复提交。
2. 使用一次性令牌（Token）机制
服务器在加载表单时生成一个唯一的随机Token，并保存在Session中。表单提交时携带该Token，服务器验证通过后清除Token，防止重复使用。
立即学习“前端免费学习笔记（深入）”；
// 后端生成Token（以PHP为例）： ```php ```// 提交处理页验证Token（submit.php）：
<?php
session_start();
if ($_POST['token'] === $_SESSION['form_token']) {
// 处理表单逻辑，如保存数据
echo "提交成功";
// 立即清除Token，防止重复提交
unset($_SESSION['form_token']);
} else {
echo "非法请求或重复提交";
}
?>这是最可靠的方式之一，能有效防止刷新和后退导致的重复提交。
3. 提交后跳转（Post/Redirect/Get 模式）
表单使用POST提交后，服务器处理完数据，返回一个重定向响应（如302），浏览器跳转到结果页。这样用户刷新结果页不会重新提交表单。
// 示例流程：- 用户访问 form.html 填写表单
- 提交到 submit.php（POST）
- submit.php 处理数据后执行 header("Location: success.php");
- 浏览器跳转到 success.php，此时刷新不会触发POST重复提交
// PHP示例：
// submit.php
// 处理数据...
saveToDatabase($_POST);
// 重定向避免刷新重复提交
header("Location: success.php");
exit;这种模式结合Token使用效果更佳，是现代Web应用推荐的做法。
4. 利用JavaScript控制提交状态
使用标志位防止JavaScript中多次触发提交逻辑。
```javascript let isSubmitting = false;document.getElementById('myForm').addEventListener('submit', function(e) { if (isSubmitting) { e.preventDefault(); return; } isSubmitting = true; document.getElementById('submitBtn').disabled = true; });
<p>适用于AJAX提交或需要前端逻辑控制的场景。</p> <p>基本上就这些方法。实际项目中建议组合使用：前端禁用按钮 + 后端Token验证 + 提交后跳转，能最大程度防止重复提交问题。关键在于服务端防护，因为前端限制容易被绕过。不复杂但容易忽略的是Token的一次性使用和及时清除。 </p>
