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

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

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

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


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

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

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

阅读 2.6k
评论 更新于 2016-12-18
    12 个回答

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

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

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

    评论 赞赏 2016-12-18

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

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

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

      评论 赞赏 2016-12-18

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

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

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

        评论 赞赏 2016-12-18

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

          评论 赞赏 2016-12-18
            Y3G
            • 440

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

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

            评论 赞赏 2016-12-18
              Bpazy
              • 481

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

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

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

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

              4. 唯一键

              评论 赞赏 2016-12-18

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

                评论 赞赏 2016-12-18
                  Nine
                  • 1.1k

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

                  评论 赞赏 2016-12-19
                    lovnie
                    • 376

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

                    评论 赞赏 2016-12-19
                      aa杨
                      • 1.7k

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

                      评论 赞赏 2016-12-19
                        radius
                        • 2.4k

                        表单中加上这么一行

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

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

                        评论 赞赏 2016-12-19

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

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

                          该答案已被忽略,原因:不符合问题要求

                          评论 赞赏 2016-12-18
                            撰写回答

                            登录后参与交流、获取后续更新提醒