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()
					}
				})
			}
		)
	}
}
相关推荐
Sailing12 分钟前
🚀AI 写代码越来越快,但我开始不敢上线了
前端·后端·面试
Alair‎12 分钟前
Vue 3 基础教程:从入门到精通
前端·javascript·vue.js
百锦再13 分钟前
树形数据展示:树形表格与树形控件的深度对比(Vue实现)
javascript·vue.js·ecmascript·递归·tree·data·table
Sylvia33.14 分钟前
体育数据API实战:用火星数据实现NBA赛事实时比分与状态同步
java·linux·开发语言·前端·python
码农阿豪15 分钟前
Vue+Ant Design表格组件开发实战:从问题到优化的完整指南
前端·javascript·vue.js
QQ243919716 分钟前
spring boot医院挂号就诊系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
Coder-coco17 分钟前
家政服务管理系统|基于springboot + vue家政服务管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·家政服务管理系统
用户693717500138418 分钟前
OS级AI Agent:手机操作系统的下一个战场
android·前端·人工智能
百锦再18 分钟前
Vue不是万能的:前后端不分离开发的优势
前端·javascript·vue.js·前端框架·vue
毕设源码_王学姐19 分钟前
2026毕设ssm+vue民宿管理系统论文+程序
前端·vue.js·课程设计