在日常使用网页或填写表单时，很多人可能都遇到过不小心点了两次提交按钮，结果一条信息被发了两遍。比如报名活动、下单购物、提交反馈，重复数据不仅让后台混乱，还可能带来退款、误操作等问题。其实只要掌握几个实用方法，就能轻松避免这类情况。
前端禁用提交按钮
最常见的做法是在用户点击“提交”后立即禁用按钮。这样即使手滑连点，第二次点击也不会触发新请求。可以用简单的 JavaScript 实现：
<button id="submit-btn" onclick="submitForm()">提交</button>
<script>
function submitForm() {
const btn = document.getElementById('submit-btn');
btn.disabled = true;
btn.textContent = '提交中...';
// 模拟表单提交
fetch('/api/submit', { method: 'POST' })
.then(() => {
alert('提交成功');
})
.catch(err => {
btn.disabled = false;
btn.textContent = '提交';
});
}
</script>使用唯一令牌（Token）机制
服务器端可以为每次表单生成一个一次性令牌，提交时必须携带这个 token。如果同一个 token 被用了两次，第二次就会被拒绝。这种方法常用于防止网络攻击，也能有效防重。
比如你在填写订单页面时，系统会自动生成一个 hidden 字段：
<input type="hidden" name="token" value="abc123xyz" />服务器收到请求后先检查这个 token 是否已使用过，用过就直接返回错误，没用过才处理数据，并将其标记为已使用。
跳转代替刷新
提交成功后不要停留在原页面，而是跳转到结果页，比如“提交成功”或“订单确认”页面。这样一来用户没法按 F5 刷新重复发送，自然就避免了重复提交。这也是大多数电商平台的做法——付款完成后自动跳到“支付结果”页。
本地缓存记录状态
利用浏览器的 localStorage 可以临时保存刚刚提交过的数据指纹。比如把提交内容的摘要存下来，下次打开表单时先比对，发现一样的内容就提示“您刚刚已经提交过啦”。
const content = document.getElementById('feedback').value;
const hash = btoa(content); // 简单编码作为指纹
if (localStorage.getItem('submitted_' + hash)) {
alert('该内容已提交，请勿重复操作');
return;
}
// 提交并记录
fetch('/api/save', { method: 'POST', body: content })
.then(() => {
localStorage.setItem('submitted_' + hash, Date.now());
});服务端做幂等性控制
最关键的防线还是在服务器。设计接口时要保证“幂等性”，也就是同样的请求多次执行结果一致。例如根据用户 ID + 操作类型 + 时间戳建立唯一索引，数据库层面直接阻止重复插入。
比如用户今天只能签到一次，那就在数据表里设置组合主键：(user_id, date)，重复插入直接报错，前端收到提示即可。
这些方法单独或组合使用，都能大大降低重复提交的风险。尤其是涉及金钱、报名、投票等重要场景，多加一层防护总是更安心。