uniapp+vue 前端防多次点击表单,防误触多次请求方法。

最近项目需求写了个uniapp+vue前端H5,有个页面提交表单的时候发现会有用户乱点导致数据库多条重复脏数据。故需要优化,多次点击表单只请求一次。

思路:

直接调用uni.showToast,点完按钮跳一个提交成功的提示。然后把防触摸穿透mask设置成true就行,最后windows.location.reload()刷新一下表单。

核心代码

写在提交按钮绑定的方法里

js 复制代码
uni.showToast({
	title: '提交成功',
	duration: 1000,
	mask:true//true显示透明蒙层,防止触摸穿透
});
windows.location.reload()

js完整代码

js 复制代码
methods: {
	submit() {
		this.$refs.form.validate().then(res =>{
				console.log('校验成功')
				uni.request({
					url:('http://xxx.xxx.xxx.xx'),
					method:'POST',
					data:this.user,
					success(res) {
						console.log(res)
						uni.showToast({
							title: '提交成功',
							duration: 1000,
							mask:true//true显示透明蒙层,防止触摸穿透
						});
						window.location.reload()
					}
				})
			}
		)
	}
}
相关推荐
不爱说话郭德纲10 小时前
uni-app x iOS 离线打包踩坑总结
uni-app·xcode
用户693717500138410 小时前
Google 推 AppFunctions:手机上的 AI 终于能自己干活了
android·前端·人工智能
用户693717500138410 小时前
AI让编码变简单,真正拉开差距的是UI设计和产品思考
android·前端·人工智能
孟祥_成都10 小时前
别再吹牛了,100% Vibe Coding 存在无法自洽的逻辑漏洞!
前端·ai编程·vibecoding
ai超级个体11 小时前
别再吹牛了,100% Vibe Coding 存在无法自洽的逻辑漏洞!
前端·ai·ai编程·vibe coding
Mike_jia11 小时前
🎓 OpenMAIC 终极指南:清华开源的多智能体 AI 互动课堂平台
前端
踩着两条虫11 小时前
告别低代码“黑盒”!VTJ.PRO 2.0:用AI与自由重塑Vue3开发
前端·低代码·ai编程
OpenTiny社区11 小时前
WebAgent :基于 MCP 协议打造的智能应用“超级路由器”
前端·agent·mcp
dweizhao12 小时前
别再用 Figma 画线框图了,Google 这款免费工具直接出 UI 稿
前端
han_12 小时前
JavaScript设计模式(五):装饰者模式实现与应用
前端·javascript·设计模式