form表单重复提交问题

昨天晚上下班时候在微信上看到一篇表单重复提交的文章，自己实践了一下，今天跟大家分享一下。

问题的现象：

        在一个普通表单页面，比如下图1-1我的一个表单页面（用于向数据库插入数据）。项目在自己本地运行的时候一般不会出现网络延迟的问题。在当项目发布到正式服务器上是就很可能会出现延迟的问题，一般延迟的时候我们就可能会连续提交，导致数据重复提价，数据库连续插入两条重复的数据，如图1-2问题

                                                                                                 图1-1

 

                                                                                             图1-2                                                          

问题的解决方案：

      现在就要防止表单重复提交，那怎么做才能防止呢。目前有二种方式

      一：js方式

           （1）对按钮进行控制

                   说白了就是在第一次点提交的时候将button设置为disable。

                

var button = document.getElementById("btn");//获取button对象

    button.attr("disabled","disabled");

    window.setTimeout(function(){

    $button.removeAttr("disabled");},1000);

      个人感觉：好像这种方式行驶可行的，但目前的一些网页好像都不是这样做的，用户体验差

        （2） 做状态位进行标识...

             这个就是设置一个标志位了来判断是不是第一次提交。

<script language="javascript"> 

var checkSubmitFlg = false; 

function checkSubmit() { 

    if (!checkSubmitFlg) { 

        checkSubmitFlg = true; 

        return true; 

        }

    else{ 

            alert("不能重复提交"); 

            return false; 

            } 

} 

</script>

个人感觉：这一种也是前端的防止用户重复提交，但如果同一个页面可以切换两个不同表单的时候可能就比价麻烦。而且懂点前端的人稍微弄一下就可以重复提交了

   二：服务器方式

       同步令牌方式：服务器端在处理到达的请求之前，会将请求中包含的令牌值与保存在当前用户会话中的令牌值进行比较，看是否匹配。在处理完该请求后，且在答复发送给客户端之前，将会产生一个新的令牌，该令牌除传给客户端以外，也会将用户会话中保存的旧的令牌进行替换。这样如果用户回退到刚才的提交页面并再次提交的话，客户端传过来的令牌就和服务器端的令牌不一致，从而有效地防止了重复提交的发生。

       这一块我当时看的时候搞不懂为什么可以控制表单重复提交，其实它就是在到达表单页面的时候产生了一个token令牌，这个令牌放在session里面，同时放到表单的隐藏域里面，当表单第一次提交时，去后台判断是否跟session的一样，一样就进行insert操作，同时产生新的token令牌，同时更新session的令牌数据，这时如果表单重复提交了，表单的令牌信息还是老的，session里面已经更新了，所以不一样了。

    令牌，struts2，springmvc好像都有实现方式，都比较简单，大家可以去试试

struts2的token令牌实现可看点击打开链接