最近的維護公司的一個代理商平台的時候，客服人員一直反映說的統計信息的時候有重復數據，平台一直都很正常，這個功能是最近新進的一個實習生同事寫的功能，然后就排查問題人所在，發現新的這個模塊的AJAX提交數據的時候沒有設置防重復提交限制，所以今天把這個問題記錄下來供AJAX新手童鞋學習，也防止以后再出現這樣的問題。
ajax詮釋
ajax 的全稱是Asynchronous JavaScript and XML，其中，Asynchronous 是異步的意思，它有別於傳統web開發中采用的同步的方式。
ajax所包含的技術
大家都知道ajax並非一種新的技術，而是幾種原有技術的結合體。它由下列技術組合而成。
1.使用CSS和XHTML來表示。
2. 使用DOM模型來交互和動態顯示。
3.使用XMLHttpRequest來和服務器進行異步通信。
4.使用javascript來綁定和調用。
在上面幾中技術中，除了XmlHttpRequest對象以外，其它所有的技術都是基於web標准並且已經得到了廣泛使用的，XMLHttpRequest雖然目前還沒有被W3C所采納，但是它已經是一個事實的標准，因為目前幾乎所有的主流瀏覽器都支持它。
ajax原理和XmlHttpRequest對象
Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然后用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。
有了上面的知識普及，相信大家對AJAX也有了比較深入的了解了，下面來學習下造成的原因和解決方案
一、造成重復提交原因
由於AJAX提交數據為異步提交，所以當我們點擊提交按鈕是通過xmlhttprequest向服務器發送異步請求，發送請求需要有處理時間，我們第一次點擊的請求尚未完成，就有接二連三的又提交了幾次，同時后來發送的請求同事也被發送到后台處理了，這種情況如果是數據讀取則不會有太大影響，但是涉及到數據提交保存或者提交之后多表數據處理就更麻煩了，所以此種情況務必要避免，免得給大家造成麻煩。
二、重復提交解決辦法
1、如果提交對象為按鈕的話，可以對按鈕設置disabled，此辦法適應於按鈕提交，此種方法簡單粗暴，也是很多人用的辦法，代如下：
$("input[type=submit]").attr('disabled',true)//在按鈕提交之后和AJAX提交之前將按鈕設置為禁用
$.ajax({
url:'/post.php'
data:{a:1,b,1}
success:function(){
$("input[type=submit]").attr('disabled',false)//在提交成功之后重新啟用該按鈕
},
error: function(){
$("input[type=submit]").attr('disabled',false)//即使AJAX失敗也需要將按鈕設置為可用狀態，因為有可能是網絡問題導致的失敗，所以需要將按鈕設置為可用
}
})
經過以上對按鈕的處理就避免了重復提交的問題
2、非按鈕對象提交
有時候我們在提交數據的時候沒有from，只有單個表單組件（input、textarea、radio、checkbox等），所以我們就可以將任何一個對象設置提交對象來完成提交，由於普通對象沒有disabled屬性，所以我們需要用其它方式來防止重復提交
var post_flag = false; //設置一個對象來控制是否進入AJAX過程
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失敗也需要將標志標記為可提交狀態
}
})
}
有了上面的方法，大部分執行重復異步請求的問題都會解決，辦法已經教給大家了，希望對新手童鞋有幫助。