ajax 防止重复提交数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38287952/article/details/82623947

 防止数据重复提交

在实际项目开发中，提交表单时常常由于网络或者其原因，用户点击提交按钮误认为自己没有操作成功，进而会重复提交按钮操作次数，如果页面前端代码没有做一些相应的处理，通常会导致多条同样的数据插入数据库，导致脏数据的增加。要避免这种现象，在$.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("异常！");
    }
});