AJAX防重复提交

 最近做的项目中在测试的时候发现统计信息的时候发现有重复的数据，排查之后发现ajax提交数据的时候没有设置防重复提交的限制。

在网上也找了几种ajax防止提交的方法其中分为提交对象为按钮和非按钮对象提交

1.如果提交对象为按钮的话，可以对按钮设置disabled，此办法适应于按钮提交，此种方法简单粗暴，也是很多人用的办法，代码如下：

 1 //在按钮提交之后和AJAX提交之前将按钮设置为禁用
 2 $("input[type=submit]").attr('disabled',true)
 3 $.ajax({
 4     url:'/post.php'
 5     data:{a:1,b,1}
 6     success:function(){
 7         //在提交成功之后重新启用该按钮
 8         $("input[type=submit]").attr('disabled',false)
 9     },
10     error: function(){
11         //即使AJAX失败也需要将按钮设置为可用状态，因为有可能是网络问题导致的失败，所以需要将按钮设置为可用
12         $("input[type=submit]").attr('disabled',false)
13     }
14 })

2.非按钮对象提交

 1 //设置一个对象来控制是否进入AJAX过程
 2 var post_flag = false; 
 3 function post(){
 4     //如果正在提交则直接返回，停止执行
 5     if(post_flag) return; 
 6     //标记当前状态为正在提交状态
 7     post_flag = true;
 8     $.ajax({//进入AJAX提交过程
 9         url:'/post.php'
10         data:{a:1,b,1}
11         success:function(){
12             post_flag =false; //在提交成功之后将标志标记为可提交状态
13         },
14         error: function(){
15             post_flag =false; //AJAX失败也需要将标志标记为可提交状态
16         }
17     })
18 }

在我的项目中我采用的是第二种方式，具体代码如下

 1  var payFlag = false; 
 2   modal.ajaxPay = function(oData){
 3         if(payFlag === true){
 4             return false;
 5         }
 6         payFlag = true;
 7         var url = modal.getString(window.location.href)+"feast.api.feastPay";
 8         $.ajax({
 9               url: url,
10               type: 'post',
11               dataType: 'json',
12               data:oData 
13         })
14         .done(function(data) {
15             console.log(data);
16             if(data.result == 1){
17               window.location.href = data.data.url;
18             }
19             if(data.result == 0){
20               modal.showValidate(data.message);
21                 modal.hideValidata();
22             }
23         })
24         .fail(function() {
25             alert("操作失败")
26         })
27         //当请求完成后就肯定执行
28         .always(function() {
29             payFlag = false;
30         });
31   }