如何防止狂点提交表单按钮导致的数据重复？

Question

最近写了一个论坛，但是测试中发现，在发布帖子时，如果网速比较慢，只要疯狂点击表单提交按钮就会在数据库里产生很多重复的帖子。

在网上查了很多资料，给出的方案大都是 js 禁用提交按钮，请问如果不用 js 的话最佳的解决方案是什么？毕竟用户有可能禁用了 js。

问题具体测试地址： http://yangxg.top/

---

目前在前端使用 jquery 禁用到提交按钮：

$('#id_form').submit(function () {
            $('#submit-id-submit').attr('disabled', true).val('发布中...');
})

可以限制普通用户的不小心行为。但对于恶意用户故意禁用掉 js吗，不知道最佳的防护措施是什么？

Answer 1

点击之后立即禁用该按钮，如果提交失败，再恢复该按钮，否则转成功页面。

或者点击之后，弹出一个遮罩。

不过，上述两个方案都要用到 js。为什么不想用 js 呢？

Answer 2

1.JS button按钮防止重复点击

2.服务端 缓存控制，方式重复写库

3.数据库建立唯一索引(比如 帖子标题唯一，不能重复)

Answer 3

可以从前台和后台来做控制：

• 添加前台控制逻辑，当用户点击发帖时，disable“发帖”按钮

• 添加后台控制逻辑，当发帖请求发送过来时，查看此人是否发送标题和内容一样的帖子，如果存在，则禁止此重复帖子的创建

Answer 4

可以在模板渲染的时候生成1个id,然后提交的时候将这个id一起提交,然后与后端进行比对,这样如果传递过来的id不对,那么就忽略处理。

Answer 5

第一，比较简单的解决方案是使用 debounce 函数限制 DOM 回调触发的频率。

第二，如果在这个年代还要考虑用户把 js 禁用掉的情况，那前端就不要做了。

Answer 6

这个问题只靠前端是解决不了的。

1. 加缓存，单机用map，分布式用redis做缓存。

2. 用Mysql的储存过程，把并发的压力交给数据库

3. 加锁，乐观锁或者悲观锁

4. 唯一键

Answer 7

当前页面生成一个唯一id，提交的时候服务端判断只处理一次，比如laravel的表单提交页都有个csrf_token

Answer 8

那就在后台自己写一个csrf好了,提供一下思路,自动生成一个key,提交内容的时候把key带过去,如果二者相同,就重置key或者清掉,如果不同,就是重复提交了

Answer 9

form表单post过去一个隐藏域的随机字符串 放到session里
程序那边接收到这个随机字符串去和session里的字符串对比 如果相同则提交 不相同则提示错误 对比的时候要重置一下这个session就可以了

Answer 10

1.JS验证，提交后禁用提交按钮
2.服务端验证，每次刷新页面，页面中都会产生token，提交数据到服务端时判断token是否有效，然后处理数据并销毁token，如果前端重复提交肯定处理不了，因为token被销毁了

Answer 11

表单中加上这么一行

<input type="hidden" name="token" value="随机字符串">

然后服务器判断一下，重复的value不处理就好了。
非常原始的方法

Answer 12

谢邀，阻止提交的方式大概分为两个方向

1. 服务端生成一个token放在页面中，提交当前页面时验证这个token，这也是防csrf的一个方法哦
2.正如前面各位同学说的在前端做处理，加一个类似disable就是禁止的那一堆玩意儿，ajax的话可以写在beforsend这里