Loading...

ajax发送时禁用按钮

css

/*div无法点击*/
.div-cant-click {
    pointer-events: none;
}

发送ajax实例

$.ajax({
    url:'url',
    type:'post',
    dataType:'json',
    data:{
        dataName:dataValue
    },
    success:function (res) {
        // 提示插件
        toastr.options = {
            "closeButton": false,
            "debug": false,
            "positionClass": "toast-top-left",
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
        switch(parseInt(res.code)){
            // 失败
            case 400:
                toastr.error(res.msg)
                // 失败则使按钮可点击
                $("#id").removeClass("div-cant-click")
                break;
            // 成功
            case 200:
                console.log(res.msg)
                break;
        }
    }
    ,beforeSend:function () {
        // 禁用按钮,防止发送多次ajax
        // 在发送请求之前禁止按钮
        $("#id").addClass("div-cant-click")
    }
})

除此之外,还可以在发送请求之前定义一个lock=true,然后判断lock是否为true,为true则进行ajax请求,同时将lock设置为false,在请求完毕设置为true

posted @ 2019-03-27 22:10  awesomego  阅读(1098)  评论(0编辑  收藏  举报