防止表单重复提交,你我有责
什么是重复提交
表单重复提交是开发中常遇到的一个问题,根据用户行为来划分的话主要分为无意重复提交和恶意重复提交两种。无意重复提交的原因很可能是网路问题,用户点击第一次的时候没有马上得到应有的反馈,所以用户再次或多次点击(毕竟大多数人局的催促是最能提高效率的)。恶意的话就可能会绕过前端的防止重复机制,直接向服务端提交多次表单以达到某种目的。
前端用户体验防止机制
单从用户体验上来说,要避免无意的重复提交,就要明确地告诉用户:服务端已经正在处理你的请求了,请好好等待。
因此在需要一定时间处理的请求上面(主要是ajax),更应该加上一些提示的信息。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
functionlogin (){
//blablabla
//显示loading动画
$.showPreloader('登錄中..');
$.ajax(url,data,function(result){
//得到结果,无论成功还是失败都要把loading关掉
$.hidePreloader();
});
}
当然了,提交后直接disable掉submit按钮也是可以的,不过感觉上没那么亲切。
cookie防止机制
利用cookie也是可行的,设置一个key当提交的时候就设为有效值,当再提交的时候如果是有效值的话就拒绝提交。
session防止机制
1.生成表单的时候产生一个唯一的标识,分别保存在服务端session中,和客户端的hidden input里面。
2.客户端提交表单的时候检查标识是否存在session中,存在的话就是第一次提交,处理请求并删除session中该表单的标识。如果不存在的话就是非第一次提交,拒绝处理。
当然了,session只是其中一个载体,用db或者缓存层在做都是可以的。