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('登录失败,请重新登录!');
}
}
});
});
});
以上三种方法为个人总结,当然还有其它方式 防止重复点击提交 ;再此就不在叙述,愿各位可以参考,也可以活动一个脑细胞,自己设计一种方式,可以在下方评论给予以分享!