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()
					}
				})
			}
		)
	}
}
相关推荐
晚风予星1 分钟前
简记 | 一个基于 AntD 的高效 useDrawer Hooks
前端·react.js·设计
栗子叶5 分钟前
网页接收服务端消息的几种方式
前端·websocket·http·通信
菩提小狗9 分钟前
Sqli-Labs Less-3 靶场完整解题流程解析-豆包生成
前端·css·less
澄江静如练_14 分钟前
优惠券提示文案表单项(原生div写的)
前端·javascript·vue.js
C_心欲无痕18 分钟前
ts - 关于Object、object 和 {} 的解析与区别
开发语言·前端·javascript·typescript
L Jiawen24 分钟前
【Windows 系统】Chrome浏览器退出登录状态失效
前端·chrome·windows
IT_陈寒37 分钟前
Java并发编程实战:从入门到精通的5个关键技巧,让我薪资涨了40%
前端·人工智能·后端
Irene199138 分钟前
Vue2 与 Vue3 响应式实现对比(附:Proxy 详解)
vue.js·响应式实现
全栈前端老曹38 分钟前
【包管理】read-pkg-up 快速上手教程 - 读取最近的 package.json 文件
前端·javascript·npm·node.js·json·nrm·package.json
程序员爱钓鱼1 小时前
Node.js 编程实战:测试与调试 —— 调试技巧与性能分析
前端·后端·node.js