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);



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


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


相关文章
|
5月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
50 0
|
8月前
|
JSON 前端开发 JavaScript
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
|
8月前
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
43 0
|
5月前
|
JSON 前端开发 JavaScript
ajax请求接口,jquery拼接数据循环
ajax请求接口,jquery拼接数据循环
40 0
|
5月前
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
32 0
|
5月前
|
JavaScript 前端开发
jquery导航选中按钮颜色变化
jquery导航选中按钮颜色变化
30 0
|
5月前
|
JavaScript
jQuery点击按钮,生成input输入框
jQuery点击按钮,生成input输入框
31 0
|
5月前
|
JSON 前端开发 JavaScript
jQuery Ajax请求成功后,为什么一直在error函数里
jQuery Ajax请求成功后,为什么一直在error函数里
|
8月前
|
前端开发 JavaScript
JavaScript 在jQuery发送Ajax请求
JavaScript 在jQuery发送Ajax请求
58 0
|
8月前
|
JavaScript 前端开发
jquery如何在点击一个按钮时显示隐藏
jquery如何在点击一个按钮时显示隐藏
98 0