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()
					}
				})
			}
		)
	}
}
相关推荐
Data_Adventure几秒前
2025–2026 Three.js 有哪些重要更新?Web 3D 正在进入 WebGPU 时代
前端·three.js
全栈老石1 分钟前
再见 Moment.js!浏览器原生支持的新一代时间库 Temporal 来了
前端·javascript
周淳APP1 分钟前
【HTTP之浏览器缓存及渲染】
前端·网络·网络协议·http·缓存
我命由我1234513 分钟前
React - React 初识、创建虚拟 DOM 的两种方式、jsx 语法规则、React 定义组件
前端·javascript·react.js·前端框架·html·html5·js
青青家的小灰灰25 分钟前
深入理解 JavaScript 箭头函数:从语法糖到核心机制
前端·javascript·面试
cxxcode28 分钟前
Web Vitals 数据采集机制分析
前端
sniper31 分钟前
AI+Shopify 前端开发:实战一年后,聊聊 AI Agent 和前端的生死局
前端
南囝coding32 分钟前
OpenClaw 到底能干什么?可以看看这 60 个真实用例
前端·后端
重庆穿山甲36 分钟前
Java开发者的大模型入门:AgentScope Java组件全攻略(二)
前端·后端
2501_9160088940 分钟前
iPhone 上怎么抓 App 的网络请求,在 iOS 设备上捕获网络请求
android·网络·ios·小程序·uni-app·iphone·webview