欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery 禁用表单提交按钮,防止用户请求重复提交

程序员文章站 2022-07-13 11:59:23
...

当页面上有表单的时候,为了防止用户等不及服务器端响应重复点击提交按钮向服务器端发送重复请求,我们通常需要在请求提交之前将提交按钮禁用。

先来看一下页面。

jQuery 禁用表单提交按钮,防止用户请求重复提交

当用户点击提交申请这个按钮时,我们需要将其禁用。

$("button.btn-submit", $form).attr("disabled","true");

一般请求结束会遇到两种情况,一种是 success,一种是 error,如果要在这两个函数中去掉按钮的禁用状态,稍显麻烦。更偷懒的做法是,在禁用按钮后设置一个定时,比如说 3 秒,定时结束后自动取消禁用状态。

var _submit = $("button.btn-submit", $form).attr("disabled","true");
setTimeout(function(){
	_submit.removeAttr('disabled');
},3000);

好了,大功告成,页面级别上的有效措施已经完成。这会在一定程度上降低请求重复提交的可能性。服务器端也需要做好对应的处理。


问题解决了吗?解决的话请随手点个赞,谢谢。

相关标签: jQuery