AJAX anti-duplicate submission

 In a recent project, duplicate data was found when the statistical information was found during the test. After investigation, it was found that there was no restriction on anti-duplicate submission when submitting data through ajax.

I also found several methods of ajax to prevent submission on the Internet, which are divided into submission objects for button and non-button object submission

1. If the submission object is a button, you can set disabled on the button. This method is suitable for button submission. This method is simple and rude, and it is also a method used by many people. The code is as follows:

1  //Set button to disabled after button submit and before AJAX submit
 2  $("input[type=submit]").attr('disabled',true)
 3  $.ajax({
 4      url:'/post. php'
 5      data:{a:1,b,1}
 6      success:function(){
 7          //Re-enable the button after successful submission
 8          $("input[type=submit]").attr('disabled' ,false)
 9      },
 10      error: function(){
 11          //Even if AJAX fails, the button needs to be set to available state, because there may be a failure caused by network problems, so the button needs to be set to available
 12          $("input [type=submit]").attr('disabled',false)
 13      }
 14 })

2. Submission of non-button objects

1  //Set an object to control whether to enter the AJAX process
 2  var post_flag = false; 
 3  function post(){
 4      //If it is submitting, return directly and stop execution
 5      if(post_flag) return; 
 6      //Mark the current state as Submitting status
 7      post_flag = true;
 8      $.ajax({//Enter AJAX submission process
 9          url:'/post.php'
 10          data:{a:1,b,1}
 11          success:function(){
 12              post_flag =false; //Mark the flag as a submittable state after the submission is successful
 13          },
 14          error: function(){
 15              post_flag =false; //AJAX failure also needs to mark the flag as a submittable state
 16          }
17     })
18 }

In my project I use the second method, the specific code is as follows

 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("Operation failed")
 26          })
 27          //When the request is completed, it will be executed for sure
 28          .always(function() {
 29              payFlag = false ;
 30          });
 31    }