Question

如何解决页面表单的重复提交问题

Answer 1

1.新建两个文件
index.jsp -- 表单页面
success.jsp -- 结果提示页面
2.代码分别如下：
3.新建TokenServlet,代码如下
4.运行index.jsp,输入用户名，点击提交
5.正常跳转结果页面
6.但当我在这个页面点击刷新的时候，出现如下提示
7.点击重试，发现又一次调用了servlet，这就是一个重复提交
8.多刷新几次，注意看URL地址，现在仍然是servlet
9.以前说重定向可以解决表单重复提交的问题，我们修改Servlet代码如下
10.再次测试，发现重定向到了success.jsp ，再点击刷新的话也不会出现重复提交了
11.那问题解决了么？再看，当我点击浏览器中的返回，然后再点击提交，如此反复，仍然在重复调用Servlet，这也是重复提交
12.现在修改Index.jsp
13.修改servlet代码
14.新建token文件，代码如下
15.在浏览器中测试（注，这里如果再使用Eclipse自带浏览器的话，会出现缓存问题，所以使用正常的浏览器火狐或者IE）
16.hidden中的token 和session中的token是相同的
17.当点击浏览器中的后退按钮，再次进行操作，发现不能重复提交
18.这是因为session中的token已经被移除掉了
19.而返回后刷新页面，相当于新开一个index.jsp 重新获取token 赋值给session,这时可以正常提交了

Answer 2

1.防止一个表单或方法多次提交。

    var i = 0;
    $("#submitBill").on("click",function(){
          if(i==1){
            return false;
          }
          //验证表单
          //组装数据
          i=1;//提交之前方法关闭    防止重复提交
          //提交ajax
          Public.ajaxPost(url,param,function(data){
              if(data.success){
                 //成功
              }else{
                i=0;//提交失败后 开放方法
              }
          });
      });

2.防止提交后返回重新提交（手机浏览器、微信内置浏览器返回按钮等）

html:<input id="isSubmit" value="0" type="hidden">
 js:
 $("#submitBill").on("click",function(){
    if($("#isSubmit").val()=="1"){
         Public.info("该表单已提交，请刷新再试。");
         return false;
    }/
    /验证表单
    //组装数据
    //提交ajax
    Public.ajaxPost(url,param,function(data){
       if(data.success){
            //提示成功
             $("#isSubmit").val(1);//设置为已提交
             //当跳转其他页面被用户使用返回按钮返回时，提交提示刷新或自动刷新页面     
         }else{
               
         }
     });
});