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()
					}
				})
			}
		)
	}
}
相关推荐
xixingzhe216 小时前
idea启动vue项目
java·vue.js·intellij-idea
超级无敌暴龙兽16 小时前
和我一起刷面试题呀
前端·面试
wzl2026121316 小时前
企业微信定时群发技术实现与实操指南(原生接口+工具落地)
java·运维·前端·企业微信
小码哥_常16 小时前
Robots.txt:互联网爬虫世界的“隐形规则”
前端
小码哥_常16 小时前
Android开发神器:AndroidAutoSize,轻松搞定屏幕适配
前端
前端一小卒16 小时前
前端工程师的全栈焦虑,我用 60 天治好了
前端·javascript·后端
不停喝水16 小时前
【AI+Cursor】 告别切图仔,拥抱Vibe Coding: AI + Cursor 开启多模态全栈新纪元 (1)
前端·人工智能·后端·ai·ai编程·cursor
coderyi18 小时前
LLM Agent 浅析
前端·javascript·人工智能
科雷软件测试18 小时前
使用python+Midscene.js AI驱动打造企业级WEB自动化解决方案
前端·javascript·python