1. 程式人生 > >ajax 防止重複提交資料

ajax 防止重複提交資料

 防止資料重複提交

在實際專案開發中,提交表單時常常由於網路或者其原因,使用者點選提交按鈕誤認為自己沒有操作成功,進而會重複提交按鈕操作次數,如果頁面前端程式碼沒有做一些相應的處理,通常會導致多條同樣的資料插入資料庫,導致髒資料的增加。要避免這種現象,在$.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("異常!");
    }
});