在Uliweb中防止表单多次提交的实现

最新推荐文章于 2024-09-16 06:30:00 发布

weixin_33953384

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量57

点赞数

文章标签：前端 python javascript ViewUI

原文链接：https://my.oschina.net/limodou/blog/171008

版权

2019独角兽企业重金招聘Python工程师标准>>>

防止表单重复提交并不是一个新问题，在这篇文章《Prevent Duplicate Form Submission》就讲了许多的办法：

禁止提交按钮
Post/Redirect/Get 模式
保存唯一Token值到session中
在数据库中増加一致性检查

以上几种模式可以根据需要来实现。下面我分别介绍一下对于1.3的实践。

禁止提交按钮

对于1.我使用jquery，因此可以在执行$.ajax时响应beforeSend和compele回调，如：

complete: function(){
    $('#addForm').find(":submit").prop('disabled', false)
},
beforeSend:function(){
    $('#addForm').find(":submit").prop('disabled', true)
}

还可以考虑在form的submit时禁止掉提交钮，但是返回时通过complete来恢复：

$('#addForm').submit(function(e){
    $(this).find(':submit').prop('disabled', true);
});

保存唯一Token值到session中

在uliweb中，我将generic的AddView和EditView添加了防止重复提交的保护。为什么没有直接在Form上添加，是因为我要使用到cache，而这个和应用相关，而Form本身和应用无所，所以没在Form上添加。还有一个原因是Form本身不实现操作流程，所以不区分显示和提交，因此也不方便。而在AddView和EditView中实现了GET和POST的不同处理，所以可以方便添加相应的检查。现在是在AddView和EditView中添加了protect参数，缺省为True。这样缺省情况下，防止多次提交是直接生效的。在uliweb的实现中没有使用session，而是cache。因为uliweb的session不是马上修改之后就保存到存储中，而是在返回时才保存。因此无法有效控制并发。

基本的实现流程是：

用户请求Form，后台判断出是GET方法，则创建一个token，然后保存到cache中，值为1，同时向form中添加一个隐藏字段，用来在前端保存这个token。
用户提交数据，后台从提交的数据中取出token值，然后使用这个值作为key将cache中的值减1，如果，返回值是0，表示第一次提交，继续处理；如果小于0，表示多次提交，返回错误。
如果第一次提交，form校验如果成功，则返回前端。如果出错，则重置token的值为1，用于出错后的提交。
cache中的值将会在1小时之后被回收。这块暂时没有处理为可配置的。

从以上流程可以看出，前后台要分别保存相同的token，因此如果get时没有通过AddView或EditView的处理或form不是处理后的form，都将造成token信息不一致。因此要自已去想办法处理。

转载于:https://my.oschina.net/limodou/blog/171008