相信有很多小伙伴們都被AjAX重復(fù)發(fā)送的問題所困擾，那么我們要如何才能避免這一問題的發(fā)生呢？接下來的內(nèi)容中小編將為大家介紹防止重復(fù)發(fā)送Ajax請(qǐng)求的方法，一起來看看吧。
在頁面中有多個(gè)按鈕，點(diǎn)擊該按鈕可以異步的去服務(wù)端讀取數(shù)據(jù)，然后在前端將數(shù)據(jù)展示出來。 每個(gè)按鈕點(diǎn)擊請(qǐng)求的頁面都是同一個(gè)，但是請(qǐng)求的參數(shù)不同，所以返回的內(nèi)容就不同。 在連續(xù)點(diǎn)擊多個(gè)按鈕的時(shí)候就會(huì)發(fā)出多個(gè)異步請(qǐng)求。那么根據(jù)請(qǐng)求返回的快慢(因?yàn)椴煌粹o參數(shù)不同，返回內(nèi)容不同，所以會(huì)有快慢之分），數(shù)據(jù)會(huì)依次的展示出來，那么就會(huì)出現(xiàn)一個(gè)先點(diǎn)擊的按鈕，由于他請(qǐng)求的數(shù)據(jù)量比較大，導(dǎo)致數(shù)據(jù)被后顯示出來。
一、問題解決
解決這種問題有兩種方式：
二、解決方案
1、將ajax請(qǐng)求的async設(shè)置為false
$.ajax({ async: false, type : "POST", url : defaultPostData.url, dataType : 'json', success : function(data) { } }); async
2、利用jquery ajaxPrefilter中斷請(qǐng)求
由于第一種方案只是一種曲線救國的方式，其實(shí)沒能真正的解決上面的問題。所以，建議使用這種方式。
var pendingRequests = {}; $.ajaxPrefilter(function( options, originalOptions, jqXHR ) { var key = options.url; console.log(key); if (!pendingRequests[key]) { pendingRequests[key] = jqXHR; }else{ //jqXHR.abort(); //放棄后觸發(fā)的提交 pendingRequests[key].abort(); // 放棄先觸發(fā)的提交 } var complete = options.complete; options.complete = function(jqXHR, textStatus) { pendingRequests[key] = null; if ($.isFunction(complete)) { complete.apply(this, arguments); } }; });Prefilters是一個(gè)預(yù)過濾器，在每個(gè)請(qǐng)求之前被發(fā)送和$.ajax()處理它們前處理。
以上內(nèi)容的核心思想是維護(hù)一個(gè)隊(duì)列，發(fā)送請(qǐng)求時(shí)，將請(qǐng)求加入隊(duì)列，請(qǐng)求響應(yīng)后，從隊(duì)列中清除，這就保證了在任一時(shí)刻只能有一個(gè)同樣的請(qǐng)求發(fā)送.
局限性：僅僅是前臺(tái)防止jquery的ajax請(qǐng)求。對(duì)于非jquery的ajax請(qǐng)求，不起作用。因?yàn)槭褂玫氖莏query的ajaxPreFilter函數(shù)，僅僅對(duì)jquery的ajax請(qǐng)求有作用。
調(diào)用abort后jquery會(huì)執(zhí)行error的方法，拋出abort的異常信息。可以使用以下方式區(qū)分出該類型的異常。
var ajax = $.ajax({ 'error':function(jqXHR, textStatus, errorThrown){ if(errorThrown != 'abort'){ //ajax被調(diào)用abort后執(zhí)行的方法 alert('您的ajax方法被停止了'); } }})三、Demo
按鈕每次點(diǎn)擊都會(huì)向后端發(fā)送請(qǐng)求，下面的demo實(shí)現(xiàn)了多次點(diǎn)擊按鈕之后，只保證最后一次點(diǎn)擊的請(qǐng)求能夠成功。
<button id="button1">button1</button><button id="button2">button2</button><button id="button3">button3</button> <script> var pendingRequests = {}; jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) { var key = options.url; console.log(key); if (!pendingRequests[key]) { pendingRequests[key] = jqXHR; }else{ //jqXHR.abort(); //放棄后觸發(fā)的提交 pendingRequests[key].abort(); // 放棄先觸發(fā)的提交 } var complete = options.complete; options.complete = function(jqXHR, textStatus) { pendingRequests[key] = null; if (jQuery.isFunction(complete)) { complete.apply(this, arguments); } }; }); <!-- 異步加載應(yīng)用列表開始 --> $("#button1").live("click", function() { $.ajax('config/ajax/appinfoListFetcher.json', { type:'POST', data: {param1:value1, param2:value2, }, success: function(res){ //后端數(shù)據(jù)回寫到頁面中 }, error:function(jqXHR, textStatus, errorThrown){ if(errorThrown != 'abort'){ //ajax被調(diào)用abort后執(zhí)行的方法 alert('應(yīng)用加載失敗！'); } } }); <!-- 異步加載應(yīng)用列表結(jié)束 --> });</script>以上就是防止重復(fù)發(fā)送Ajax請(qǐng)求的方法，希望對(duì)大家的學(xué)習(xí)有所幫助，本文具有很好的參考價(jià)值，非常值得大家收藏！
新聞熱點(diǎn)
疑難解答
圖片精選
