1. 程式人生 > >$.ajax防止多次點選重複提交的方法

$.ajax防止多次點選重複提交的方法

第一種:使用$.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')
    }
})