JS中如何防止AJAX命令重複載入(執行一次,自動向後臺傳送兩次以上的請求)
阿新 • • 發佈:2018-12-24
將程式碼部署在伺服器上後,在提交資料並將資料插入資料庫時,總是在提交後不多時,資料便變成了亂碼。後來發現原來是AJAX在搗鬼。
1、將如下程式碼放在將要傳送AJAX請求的方法前
<!--防止ajax重複載入--> <script> function prevent_reloading(){ var pendingRequests = {}; jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) { var key = options.url; console.log(key); if (!pendingRequests[key]) { pendingRequests[key] = jqXHR; }else{ //jqXHR.abort(); //放棄後觸發的提交 pendingRequests[key].abort(); // 放棄先觸發的提交 } var complete = options.complete; options.complete = function(jqXHR, textStatus) { pendingRequests[key] = null; if (jQuery.isFunction(complete)) { complete.apply(this, arguments); } }; }); } </script>
例如:我要執行一個建立標籤的方法,可按照如下方法進行
<!--建立標籤--> <script type="text/javascript"> function create_tag_fun(){ <!--將防止ajax重複載入的方法放在此處--> prevent_reloading() <!--就是上面的方法--> var new_tag = $('#new_tag').val(); if(new_tag.length==0){ alert("請輸入標籤名!") } else{ $.ajax({ <!--向後臺提交資料的時候最好使用post請求(重要!)--> type: 'post', url: '/create_new_tag/', dataType: 'json', async: false, data: {'new_tag': new_tag}, success: function (data){ var data = data.data if(data == 1){ alert("標籤新增成功!請重新整理顯示!") } else{ alert("此標籤資料庫中已存在!") } }, error: function (jqXHR, textStatus, errorThrown) { if(errorThrown != 'abort'){ alert('應用載入失敗!'); } }, }); } } </script>
完畢!