$.ajax防止多次点击重复提交的方法

更新日期: 2019-05-25阅读: 2k标签: ajax分享

复制链接

新浪微博

QQ 好友

扫一扫分享

第一种：使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法：

$.ajaxPrefilter()方法 :是对全局所有的ajax请求有效，在所有的ajax请求之前，会对每一个请求统一做一些处理，可以去设置ajax的选项，也可以对现有的ajax选项进行更改；

接收两个参数：

dataTypes ：可选参数，一个可选的字符串，其中包含一个或多个空格分隔的数据类型；
handler(options, originalOptions, jqXHR)：一个函数，接收三个参数。

各个参数的含义：

options ：是请求的选项，包括accepts、crossdomain、contentType、url、async、type、headers、error、dataType等许多参数选项
originalOptions ：值作为提供给Ajax方法未经修改的选项，因此，没有ajaxSettings设置中的默认值
jqXHR ：就是经过jquery封装的XMLHttpRequest对象(保留了其本身的属性和方法)

代码如下：

$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
  if ( options.abortOnRetry ) {
    if ( currentRequests[ options.url ] ) {
      currentRequests[ options.url ].abort();
    }
    currentRequests[ options.url ] = jqXHR;
  }
});

第二种：使用beforeSend选项，在发送请求前将提交按钮变为不可用的状态；

上面的第一种方法是针对所有的ajax请求，而这一种针对的是单个的请求；

在点击过一次提交后，在提交完成前都将提交按钮不可用，这样就避免掉了重复点击的问题

$.ajax({
    url:'testurl',
    beforeSend:function(){
        $('.submit').attr('onclick','javascript:void();');
    },
    success:function(data){
        $('.submit').removeAttr('onclick')
    },
    error:function(){
        $('.submit').removeAttr('onclick')
    }
})

链接: https://fly63.com/article/detial/3895

$.ajax防止多次点击重复提交的方法

第一种：使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法：

第二种：使用beforeSend选项，在发送请求前将提交按钮变为不可用的状态；

js中关于ajax笔试面试题汇总

Vue通过ajax获取数据，如何避免绑定的数据中出现 property of undefined错误

js 判断异步执行完成方法总汇，比如多个ajax执行完毕后执行其他方法

使用AJAX实现文件拖拽上传功能详解

ajax请求 get与post的区别？_get和post的使用场景

IE浏览器关于ajax的缓存机制

使用Ajax同步请求时，等待时间过长增加页面提示问题

解决ajax跨域访问sessionid不一致问题

web项目通过ajax提交数据太大报错

ajax的优缺点