页面按钮防止ajax重复提交

本文介绍了一种利用CSS的pointer-events属性来避免在页面交互中由于按钮被连续点击而导致的重复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请求。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值