jquery 防止重复点击提交

jquery 防止重复点击提交

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('登录失败，请重新登录！');}}}); });
});

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