页面按钮防止ajax重复提交

这两天在做一个项目,页面交互非常多,到处都是ajax,测试时发现点击按钮是很有可能重复请求ajax,看网上说加锁的方法,不过我也有一个方法,不知道别人用过没,废话不说,我用了CSS中的pointer-events属性,直接上JS代码吧;

`    var formyAjax = false;
    function formy(self) {
        $(".getyaoshi").css("pointer-events", "none");
        console.log("getyaoshi");
        if (formyAjax){
            formyAjax.abort()
        }
        formyAjax = $.post('请求的url', {
            'type': '1'
        },
            function(res) {
            console.log(res);
            if(res.s==200){
                $(".getyaoshi").css("pointer-events", "auto");
                onsole.log("200");
            }

        }, 'json');
    }`

这段代码原理是进行请求时先用css将请求按钮点击效果禁用,请求完后再将修改pointer-events的属性为auto,这样就可以防止因按钮多次点击引起多次ajax请求。

猜你喜欢

转载自blog.csdn.net/King_flag/article/details/53513647
今日推荐