Ajax 重复提交解决方案

我会带着你远行 2022-05-27 05:59 258阅读 0赞

#### 一、问题产生原因 ####

--------------------

由于 AJjax 提交数据为异步提交，所以当我们点击提交按钮是通过 `xmlhttprequest 对象`向服务器发送异步请求，发送请求需要有处理时间，我们第一次点击的请求尚未完成，就有接二连三的又提交了几次，同时后来发送的请求同时也被发送到后台处理了，故造成了 Ajax 的重复提交问题。

#### 二、解决方案 ####

--------------------

##### 1. 改变按钮可点击状态 #####

原理很简单，就是在触发客户端事件（如点击事件）和发送异步请求之间，使点击按钮不可用，ajax结果返回后置为可用。（在 jq 中可以设置在 beforeSend 函数中，比如下面的代码）

$.ajax({ 
      type: "POST", //发送是以POST还是GET
      url: "ajax.php", //发送的地址
      dataType: "json", //传输数据的格式
      data: {
       "username": "zwkkkk1","password": 123456}, //传输的数据,
      beforeSend: function() { 
          //触发ajax请求开始时执行
          $(".submit-btn").attr('disabled',true);  //设置按钮不可用
      }
      //成功的回调函数
      success: function(msg) {  
        $(".submit-btn").attr('disabled',false);   //设置按钮可用
      }, 
      //失败的回调函数
      error: function() {  
        $(".submit-btn").attr('disabled',false);   //设置按钮可用
      } 
    })

##### 2.利用jquery ajaxPrefilter中断请求 #####

Prefilters是一个预过滤器，在每个请求之前被发送和 $.ajax() 处理它们前处理。  
这里没有在项目中用过，就不瞎分享，免得误导大家，这里附个手册链接 [jQuery.ajaxPrefilter() 函数详解][jQuery.ajaxPrefilter_]

[jQuery.ajaxPrefilter_]: http://www.365mini.com/page/jquery_ajaxprefilter.htm