防止表单重复提交

本文介绍了前端表单重复提交的多种解决办法。包括用JavaScript禁用提交按钮、按钮倒计时、添加验证码、ajax提交加锁、提交后重定向页面等前端手段,也提及服务端生成唯一token、用cookie记录状态,还包括数据库添加唯一索引约束等方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

js禁用提交按钮 
这种方式是一种比较简单也比较常用的方法。当用户提交完表单后,用javascript禁用提交按钮让按钮不可点击。也就是设置disabled属性为disabled或者true即可。

按钮倒计时 
页面上表单提交后,将按钮置灰不可点击后加入倒计时,比如5秒或者10秒后按钮恢复点击状态才能再次提交。这种方式也可以避免大量请求,减轻服务端访问的压力。

验证码 
页面上添加验证码,不管验证输入正确与否,提交后均刷新验证码。

ajax提交加锁 
采用ajax方式提交表单时,设置一个布尔变量(true/false),当然其他类型变量也可以。初始时为true可以提交,在前端向服务器发出请求后,服务端响应结果没有回来之前将该值置为false,正常响应时再置为true。

提交后重定向到一个提交成功的页面 
表单提交后跳转到另外一个成功页面。这样可以避免用户按F5导致的重复提交,浏览器也不会出现表单重复提交的警告,以及消除按浏览器前进和后退按导致的同样问题。

服务端生成一个唯一的token 
首先在服务端生成一个token保证唯一性,然后将这个token保存在session或者redis等缓存中。与此同时将token放到页面的隐藏input中,发给浏览器。用户在页面上提交时带着这个token一块提交到服务端,服务端通过比对token的值。如果相等代表首次提交,此时将session或者缓存中保存的token值remove掉,反之则认为重复提交,服务端不予处理。

cookie记录表单提交的状态 
使用Cookie记录表单提交的状态,根据其状态可以检查是否已经提交过表单。跟上一种类似,服务端生成token存入Cookie,表单提交时将Cookie中token和服务端token比对。

数据库添加唯一索引约束 
向数据库字段添加一个唯一索引。如果表单重复提交,那么数据库插入重复记录时,唯一约束能有效避免重复入库。这样控制的话,日志会出现Your program attempts to store duplicate values in a database column that is constrained by a unique index的报错信息,看着有点不爽。

原文地址:

https://blog.youkuaiyun.com/xss_lala/article/details/80314266

转载于:https://www.cnblogs.com/jinyu59/p/10835006.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值