聊一聊开发中如何防止表单重复提交(1)

场景:在项目开发中,我们经常会听到测试人员抱怨,我提交表单,表单窗口没有及时关闭,没反应,又点击了一下提交,结果插入两条一模一样的数据。其实,我们遇到重复提交的场景大多数都是这种原因,今天我们就来聊一下,如何用最简单的方式处理它吧。

分析原因:如上场景,可能就是网络原因或者其他XXX原因,后台数据没有及时返回,导致前端页面窗口没有关掉。

处理方式1:  修改页面,给提交按钮加个禁用属性,亦或者是加个什么loading的样式啊,反正不允许用户重复点击(不推荐)

    具体实现:用户一点提交,我就通过js禁用掉该按钮不能操作,ajax请求响应了,再把禁用打开,用户(正常用户,不包括那种直接通过浏览器url来攻击你服务器的用户)讲道理不可能重复提交。呵呵,就是这样,我后台不需要改任何代码,分分钟搞定。我定义为最简单的方式,有时候应急这样做也是可以的嘛。

优点:简单,快速,高效,应急

缺点:1,在页面上做的这些验证啊,操作啊,大家懂得,不安全。

            2,别人太容易攻击你的网站了,别人就一直用工具给你重复提交,不就完了吗。

处理方式2: 数据库唯一索引控制(推荐,简单,可以不用考虑什么分布式啊,集群啊,不同用户并发操作啊,因为直接在数据库做验证)

具体实现:既然你要插入重复数据,好吧,我加个唯一索引,数据库插入报错,提示 “重复提交”不就行了吗。新建一个字段来处理,这个字段就把它作为唯一索引,UUID或者时间戳都是可以的。那我们可以每次在弹出提交页面表单的时候,在后台生成一个唯一索引比如UUID,传给前端,前端提交带上UUID,我们直接在数据库保存即可,试想,你不刷新页面,猛点提交按钮的情况下,每次传到后台的UUID都是同一个,直接存数据库,报错,提示就完了。

        优点:还是简单,快速,高效,应急(不需要引进其他任何技术,后台代码也只是加个try catch而已)

        缺点:1,狂点按钮,增加数据库压力,还有处理方式1的第三个缺点

                    2,系统中有很多表单提交按钮,我都需要去加个莫须有的字段(当然,你要是比较勤奋,可以忽略,但是我觉得这点是比较烦人的,数据库侵入性高)

                    3,数据库要是由于各种原因响应慢,用户确得不到任何提示(当然,这点我认为不重要)

                    4,通过数据库验证,在性能,速度上都不是最优的,比如你连续点两次提交,可能不会及时响应提示,但是至少数据不会出问题(这个缺点,看项目情况吧,我觉得还OK)

总结:我个人不建议使用第一种方式,建议使用第二种方式,更建议使用第一种+第二种的组合方式,组合方式有个好处就是,用户不可能出现狂点按钮的操作,也就不可能给数据库造成太大的压力,综上,还是要根据自己项目的实际业务场景来做出最优选择。一般用户量不大,并发不高的系统,推荐组合使用。当然并发高,两种方式我都不建议使用,毕竟第二种是直接操作数据库,压力大,还可能不能及时响应给用户。

综上,并发小,用户量小,(还要根据实际业务场景)推荐使用组合方式,因为简单啊,思路简单明了,第二种方式直接操作数据库,说白了就是个悲观锁(当然并不是锁,只是比喻),不管你是集群还是分布式,都是OK的,推荐!

好了,今天简单方式解决防重复提交介绍到这,其实我觉得一般项目就用组合方式很OK的,后期文章还会介绍其他方式,敬请期待。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表...
    重山杨阅读 1,807评论 5 26
  • 一. 表单设计的影响与原则 1.1 表单的产生 由内而外,网站根据自身信息存储格式要求,从数据库映射成表单。 由外...
    晓梦蝉君阅读 12,386评论 1 30
  • 在火车上。窗外,除了的深浅交错的田野能偶尔吸引小多的目光外,别的似乎都没有引起他的兴趣,直到远处出现了一间水泥厂,...
    麦叔和小麦阅读 317评论 0 9
  • 许雯的备注都是张学弟(洛杉矶一套别墅),王静(上海两套一百平精装)之类的备注。 “哗啦”一阵文件夹倒在办公桌上的声...
    楠枫先生阅读 542评论 1 2
  • 文 | 昆南 参赛编号:830 念我平常居 气结不能言——曹植 人结婚时,要置办家具。大多数人,也只有这时才...
    昆南阅读 420评论 6 20

友情链接更多精彩内容