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()
					}
				})
			}
		)
	}
}
相关推荐
大腕先生17 分钟前
通用分页超详细介绍(附带源代码解析&页面展示效果)
xml·java·linux·服务器·开发语言·前端·idea
睿智的海鸥21 分钟前
Markdown 语法大全详解
开发语言·前端·javascript·css·html
Highcharts.js32 分钟前
用Highcharts如何动态向一个序列添加点
前端·javascript·react.js·highcharts
HookJames38 分钟前
设计Section 09 · Cost & Lead Time Factors 的完整 Block Editor 操作步骤
前端
玖玖passion1 小时前
React 常用 Hooks 函数及使用方法完全指南(useState / useEffect / useRef / useContext / useCallback / useMemo / useReducer)
前端·javascript
Awu12271 小时前
⚡精通Claude第6课-Hooks钩子系统:从前端视角玩转AI自动化工作流
前端·aigc·claude
椰猫子1 小时前
Spring Framework(Bean)
java·前端·spring
道清茗1 小时前
【RH294知识点汇总】第 7 章 《 使用角色和 Ansible 内容集合简化 Playbook 》
java·前端·ansible
前端那点事1 小时前
彻底弄懂async/await!解决回调地狱,Vue异步开发必备(超全实战)
前端·vue.js
A_nanda2 小时前
VS2022安装QT6.5.3后,如何更新项目配置
前端·javascript·vue.js