AJAX防重複提交的辦法總結
阿新 • • 發佈:2018-12-21
參考文章AJAX防重複提交的辦法總結
導讀:
最近的維護公司的一個代理商平臺的時候,客服人員一直反映說的統計資訊的時候有重複資料,平臺一直都很正常,這個功能是最近新進的一個實習生同事寫的功能,然後就排查問題人所在,發現新的這個模組的AJAX提交資料的時候沒有設定防重複提交限制,所以今天把這個問題記錄下來供AJAX新手童鞋學習,也防止以後再出現這樣的問題。
ajax詮釋
ajax 的全稱是Asynchronous JavaScript and XML,其中,Asynchronous 是非同步的意思,它有別於傳統web開發中採用的同步的方式。
ajax原理和XmlHttpRequest物件
Ajax的原理簡單來說通過XmlHttpRequest物件來向伺服器發非同步請求,從伺服器獲得資料,然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。
1.造成重複提交原因
由於AJAX提交資料為非同步提交,所以當我們點選提交按鈕是通過xmlhttprequest向伺服器傳送非同步請求,傳送請求需要有處理時間,我們第一次點選的請求尚未完成,就有接二連三的又提交了幾次,同時後來傳送的請求同事也被髮送到後臺處理了,這種情況如果是資料讀取則不會有太大影響,但是涉及到資料提交儲存或者提交之後多表資料處理就更麻煩了,所以此種情況務必要避免,免得給大家造成麻煩。
2.重複提交解決辦法
- 如果提交物件為按鈕的話,可以對按鈕設定disabled,此辦法適應於按鈕提交,此種方法簡單粗暴,也是很多人用的辦法,代如下:
//在按鈕提交之後和AJAX提交之前將按鈕設定為禁用 $("input[type=submit]").attr('disabled',true) $.ajax({ url:'/post.php' data:{a:1,b,1} success:function(){ //在提交成功之後重新啟用該按鈕 $("input[type=submit]").attr('disabled',false) }, error: function(){ //即使AJAX失敗也需要將按鈕設定為可用狀態,因為有可能是網路問題導致的失敗,所以需要將按鈕設定為可用 $("input[type=submit]").attr('disabled',false) } })
- 非按鈕物件提交
有時候我們在提交資料的時候沒有from,只有單個表單元件(input、textarea、radio、checkbox等),所以我們就可以將任何一個物件設定提交物件來完成提交,由於普通物件沒有disabled屬性,所以我們需要用其它方式來防止重複提交
//設定一個物件來控制是否進入AJAX過程
var post_flag = false;
function post(){
//如果正在提交則直接返回,停止執行
if(post_flag) return;
//標記當前狀態為正在提交狀態
post_flag = true;
$.ajax({//進入AJAX提交過程
url:'/post.php'
data:{a:1,b,1}
success:function(){
post_flag =false; //在提交成功之後將標誌標記為可提交狀態
},
error: function(){
post_flag =false; //AJAX失敗也需要將標誌標記為可提交狀態
}
})
}
有了上面的方法,大部分執行重複非同步請求的問題都會解決