jquery 防止重复点击提交

在项目中,点击事件与后端交互时,网络不畅会导致用户多次点击产生不良效果。本文分享了jQuery防止重复点击提交的三种解决方案,包括使用CSS禁用属性、jQuery的one()方法以及针对ajax请求方式的处理,还鼓励读者自行设计方法并分享。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jquery 防止重复点击提交

在项目中常常会使用到点击事件,当此点击事件与后端有交互时 ,或是网络不是很顺畅,用户多次点击事件会产生意想不到的效果,导致用户体验差;针对重复点击事件,笔者也曾经遇到过,在此,分享 jquery 防止重复点击提交 的解决方案。

方法一: 使用 css 禁用属性 —— disable

该方法只能点击一次,若想再次点击需要页面重新进行了加载或者跳转;

<form action="/login" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" id="submitBtn"  value="登录" />
</form>

<script>
	$(function(){
		$('#submitBtn').on('click‘,function(){
				$(this).attr('disabled',true); //点击后就禁用,若想再次点击需刷新页面;
				$(this).val('登录中...');  //此处设置 value 值给以提示
				this.form.submit();
		});
	});
</script>
方法二: 使用 jquery 中 one() 方法

同样是上面 Html 例子,也是只可点击一次;再次点击需要页面重新进行了加载或者跳转;该方式是将绑定 on 方法 改为 one 方法 ,如下:

<script>
	$(function(){
		$('#submitBtn').one('click‘,function(){
				$(this).attr('disabled',true); //点击后就禁用,若想再次点击需刷新页面;
				$(this).val('登录中...');  //此处设置 value 值给以提示
				this.form.submit();
		});
	});
</script>
方法三: 针对 ajax 请求方式

异步请求更好的适应用户的体验,为防止多次提交,可在提交前做处理;

$(function () {
    $('#submitBtn').click(function () {
        //1.先进行表单验证
        //......
        //2.异步提交
        $.ajax({
            url: url+'/login',
            data: $('form').serialize(),
            type: 'post',
            beforeSend: function () {
                //3.设置提交按钮失效,以实现防止按钮重复点击
                $(this).attr('disabled', true);
                //4.给用户提示
                $(this).val('登录中...');
            },
            complete: function () {
                //5.提交完成后按钮重新设置有效
                $(this).removeAttr('disabled');
            },
            success: function(data){
                if (data === 'ok') {
                    alert('登录成功!');
                    //做逻辑处理
                    //......
                } else {
                    alert('登录失败,请重新登录!');
                }
            }
        }); 
    });
});

以上三种方法为个人总结,当然还有其它方式 防止重复点击提交 ;再此就不在叙述,愿各位可以参考,也可以活动一个脑细胞,自己设计一种方式,可以在下方评论给予以分享!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值