$.ajax防止多次點選重複提交的方法
阿新 • • 發佈:2019-02-10
第一種:使用$.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物件(保留了其本身的屬性和方法)
程式碼如下:
var currentRequests = {};//設定一個空物件,裡面的結構是: {url1:jqxhr1,url2:jqxhr2}
$.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')
}
})