ajax提交 使用css 控制按钮防止重复点击

摘要:有时候遇到ajax提交数据时 多点几次会出现重复点击的情况.所以下面介绍一个用css控制防重复点击的效果,submitting 是一个类 没有任何意思,也可以写成变灰度的效果

有时候遇到ajax提交数据时 多点几次会出现重复点击的情况.所以下面介绍一个用css控制防重复点击的效果,submitting 是一个类 没有任何意思,也可以写成变灰度的效果.


原理很简单

1.判断有没有这个类,有说明重复点击 返回false  if(obj.hasClass('submitting'))return false;

2.添加类 obj.addClass('submitting');

3.如果有表单验证 需要报错时移除这个类,以便不影响二次点击 obj.removeClass('submitting');

4.回调完成移除类 obj.removeClass('submitting');

<script>
var obj=$(".content");
if(obj.hasClass('submitting'))return false;
obj.addClass('submitting');

var query = new Object;
query.id = 1;
$.ajax({
    url:AJAX_URL,
    data:query,
    type:"get",
    success:function(data){
        obj.removeClass('submitting');
        if(data.status==1) {
            
        }else {
            
        }
    }
})
</script>


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_3653