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

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

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


先来看一下页面。


image.png


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


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

1

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


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

setTimeout(function(){

_submit.removeAttr('disabled');

},3000);



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


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


相关文章
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
92 0
|
19天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
59 21
|
24天前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
51 7
|
7月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
57 0
|
3月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
146 1
|
4月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
4月前
|
存储 JavaScript 前端开发
使用jQuery实现Form表单提交
【9月更文挑战5天】
117 5
|
5月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
31 1
|
5月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
25 1
|
JSON 前端开发 JavaScript
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)