防止重复提交表单的方式

防止重复提交表单的方式

表单重复提交是在web开发中经常遇到的问题，顾名思义就是指同一个表单用户有意或无意的提交了两次，轻则引起系统数据出现重复，重则引起系统业务逻辑异常，导致系统数据错乱。
一、引起表单重复提交有以下几种常见场景：
1.重复点击提交按钮。包括恶意的连续点击提交按钮，或因为网络慢、服务器处理速度慢等引起的用户多次点击。
2.表单提交处理完后，通过浏览器的后退按钮回到原页面再次点击提交按钮。
3.通过点击浏览器的刷新按钮，导致表单重复提交
4.通过浏览器的历史记录，获取表单提交的URL地址，再次访问

二、解决方式
1.JS脚本方式
JS脚本方式只能限制场景一的多次点击，且须和服务端方式结合使用。JS限制有以下几种方式：
（1）定义全局变量，在form提交前判断是否已有提交过

<script>
	var checkSubmitFlg = false;
	function checkSubmit(){
		if(checkSubmitFlg == true){
			return false;
		}
		checkSubmitFlg = true;
		return true;
	}
</script>

<form action="" onsubmit="return checkSubmit();">
</form>

（2）单击提交按钮后，立刻禁用改按钮
（3）单击提交按钮后，弹出屏蔽层，防止用户第二次点击

2.服务端方式
在打开页面同时生成一个token，存放在session中，同时在页面的form中设置一个隐藏域，表单提交时后端检查session中是否存在该token，存在则立即从session中remove，然后进行正常业务逻辑操作（如业务逻辑操作失败则可再添加该token到session中，方便用户修改数据后再提交），不存在该token则返回重复提交的提示。
服务端方式防止表单重复提交能解决大部分表单重复提交的问题，但是也存在一些缺陷。比如，针对同一个表单快速重复提交的情况并不能准确保证只有一个请求被正常处理；session中存放token只能针对一个表单，如果用户在同一个会话里同事打开多个form表单，则只能正确处理最后一个打开的form页面（可采用在数据库中保存处理过的token替换remove的方式，但该方式性能较差，不推荐采用）。

3.唯一性约束
在数据库中增加唯一性约束限制，这是最有效防止表单重复提交的方式。

三、总结
一般情况下采用JS脚本方式和服务端方式两种结合已可防止表单重复提交，针对特殊业务要求的可采用数据库唯一性约束限制等方式来强制保证业务逻辑上的数据唯一要求。