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失敗也需要將標誌標記為可提交狀態
}
})
}
有了上面的方法,大部分執行重複非同步請求的問題都會解決
相關文章
- 關於ajax提交表單,重複提交解決方法
- Spring MVC表單防重複提交SpringMVC
- $.ajax使用總結(一):Form提交與Payload提交ORM
- SpringMVC後臺token防重複提交解決方案SpringMVC
- PHP 防抖(防重複提交)有哪些實現方法,具體程式碼PHP
- 分散式重複提交分散式
- axios 重複提交iOS
- 字串本身重複字元的檢查辦法字串字元
- asp.net防重新整理重複提交、防後退www.yingtaowu.cnASP.NET
- js 防止重複提交方案JS
- 架構設計 | 介面冪等性原則,防重複提交Token管理架構
- 【AJAX 總結】
- PHP 防止表單重複提交PHP
- 前端如何防止介面重複提交前端
- 重複提交,你是如何處理的?
- 防止表單重複提交的程式碼
- 《最佳化介面設計的思路》系列:第六篇—介面防抖(防重複提交)的一些方式
- 防止表單重複提交的幾種策略
- 解決表單重複提交的問題
- strust2 重複提交的問題Rust
- jFinal避免表單重複提交
- 重複的ajax請求讓人很受傷
- Ajax使用總結
- YII GET方式引數重複/疊加的解決辦法
- PHP防止表單重複提交的解決方法PHP
- beego有防止頁面重複提交的功能嗎Go
- 前端防止使用者重複提交-js前端JS
- jquery防止重複提交程式碼例項jQuery
- Ajax面試題總結面試題
- Ajax學習總結
- Ajax 相關總結
- 破解防影印紙辦法
- Laravel Ajax 提交更新Laravel
- jquery ajax 提交 FormDatajQueryORM
- 前臺防止表單重複提交的方法。Jquery、jsjQueryJS
- 自頂向下語法分析複習總結語法分析
- PHP防止使用者重複提交表單PHP
- 技術分享:如何避免ajax重複請求?