ajax怎麼解決重複提交

2019-12-12 07:27:24

在做前端開發時，經常會用到ajax提交資料，給一個按鈕使用者點選後，提交資料，但有時網速較慢，使用者點選後以為沒反應，再點選一次時，就會造成重複提交了，如何避免這種情況？下面我們來看一下。

我們定義一個按鈕來觸發ajax請求。

按鈕事件就是一個ajax的傳送邏輯。

為了避免重複提交，我們可以定義一個變數。開始值為false，然後當這個值為false時，我們就傳送ajax請求。

在傳送請求時，把這個值設定為true，在成功或有錯誤返回時，設定為false，這樣就可以避免重複提交了，因為只有ajax返回後，才能提交第二次。

但當你的頁面有多個按鈕觸發多個ajax請求時，使用一個變數就不行了。我們可以修改一下，使用另外一種方法，就是新增一個beforeSend的方法，在這個方法裡設定按鈕為不可點。在有返回後，再設定按鈕為可點選的。程式碼如圖。

執行頁面，這是請求前的按鈕，我們點選按鈕傳送請求。

在傳送期間，這個按鈕就會變成不可點選的，使用者想重複提交都不行的。ajax有返回後，會修改按鈕為可點的。