防止表单重复提交

遇到的场景:

一、 表单里填写数据,点击按钮提交,数据库里增加一条数据。表单数据没有增加。再点击提交导致同一条记录重复插入到数据库中,。
二、 网络有延迟,点击提交的时候,页面在加载中,又不断的点击提交,数据库里同一条记录重复插入。
三、 用户提交后,点击浏览器的后退,退回到表单页面后进行再次提交。
防止这些场景的方法:
思路:大概的思路是在客户端控制和在服务端控制

使用Post/Redirect/Get模式

表单通过post提交至服务端,服务端重定向跳转到提交成功页面。,这就是所谓的PRG模式。这可以防止用户刷新重复提交。

使用js禁掉提交按钮

在button提交之前将button的属性disabled设置为true,但是这样又会出问题,因为表单都会又验证,这样就会使button按钮没通过验证提交后被禁掉了,所以在button禁掉之前需要做个判断,有个$(“#formid”).parsley.validate(); 可以获取验证是否成功给个boolean值,这个用与网络延迟的重复点击提交情况。

使用ajax和重定向。

用ajax异步查询数据库这条记录是否存在,不存在就插入并跳转到提交成功页面。

利用session存唯一标识

写一个input隐藏框,用于生产唯一Token。

1
<input type="hidden" name="token" value="<%=session.getAttribute("token") %>">

客户端的js代码中设置一个标识位,第一次提交后将标志位设置成true

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript"> 
var isCommitted = false;//表单是否已经提交标识,默认false
function dosubmit(){
if(isCommitted==false){
isCommitted = true;//提交表单后,将表单是否已经提交标识设置为true
return true;//返回true让表单正常提交
}else{
return false;//返回false那么表单将不提交
}
}
</script>
-------------本文结束感谢您的阅读-------------