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失敗也需要將標誌標記為可提交狀態
        }
    })
}

有了上面的方法，大部分執行重複非同步請求的問題都會解決