js如何防止ajax重复提交表单

2022-03-08   阅读:762   分类:前端    标签: JavaScript

很多开发者在做表单提交数据到后台的时候,会出现多提交一次,多一条数据的情况,这种原因的是因为服务端未能及时响应结果(网络延迟,并发排队等因素),导致前端页面没有及时刷新,用户有机会多次提交表单

如果提交对象为按钮的话,可以对按钮设置disabled,此办法适应于按钮提交,此种方法简单粗暴,也是很多人用的办法:

$(".sub").attr('disabled',true)//在按钮提交之后和AJAX提交之前将按钮设置为禁用
$.ajax({
	url:'/post.php'
	data:{a:1,b,1}
	success:function(){
		$(".sub").attr('disabled',false)//在提交成功之后重新启用该按钮
	},
	error: function(){
		$(".sub").attr('disabled',false)//即使AJAX失败也需要将按钮设置为可用状态,因为有可能是网络问题导致的失败,所以需要将按钮设置为可用
	}
})



【腾讯云】预热专享1888元早鸟券一键领取,云服务器等爆品抢先购低至4.2元/月

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/881.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×