ajax 防止重複提交資料
阿新 • • 發佈:2018-12-09
防止資料重複提交
在實際專案開發中,提交表單時常常由於網路或者其原因,使用者點選提交按鈕誤認為自己沒有操作成功,進而會重複提交按鈕操作次數,如果頁面前端程式碼沒有做一些相應的處理,通常會導致多條同樣的資料插入資料庫,導致髒資料的增加。要避免這種現象,在$.ajax請求中的beforeSend方法中把提交按鈕禁用掉,等到Ajax請求執行完畢,在恢復按鈕的可用狀態。
$.ajax({ //幾個引數需要注意一下 type: "POST",//方法型別 dataType: "json",//預期伺服器返回的資料型別 url: "{:url('ask/getUserAnswerData')}" ,//url data: {'id' : id, 'content' : content } , beforeSend: function () { // 禁用按鈕防止重複提交 $(".write-btn").attr({ disabled: "disabled" }); }, success: function (data) { if (data.code == 1) { layer.open({ content: data.msg ,skin: 'msg' ,time: 2 //2秒後自動關閉 }); setTimeout(function() { window.location.href = data.url; }, 2000); } else if (data.code == 0) { layer.open({ content: data.msg ,skin: 'msg' ,time: 2 //2秒後自動關閉 }); // 移除 disabled $(".write-btn").removeAttr('disabled'); } }, error : function() { alert("異常!"); } });