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()
					}
				})
			}
		)
	}
}
相关推荐
专注VB编程开发20年12 小时前
VBA/VB6连接、读取Mdb access数据库最快的方法
前端·ui·ado·vb6
CodeCxil12 小时前
基于Vue的在线Online Word文档编辑器
vue.js·编辑器·word
W.A委员会12 小时前
大数据渲染
前端
五仁火烧12 小时前
前端不传文件,也能用 multipart/form-data
前端·javascript·vue.js·node.js
五仁火烧12 小时前
前端最常用的两种请求数据格式application/json 和 multipart/form-data 完全解析
前端·javascript·vue.js·json
Bigger12 小时前
第七章:我是如何剖析 Claude Code 的性能优化与部署策略的
前端·claude·源码阅读
大连好光景12 小时前
接口测试入门案例
前端·后端·web
卢傢蕊12 小时前
使用Haproxy搭建Web群集
前端·haproxy
FrontAI12 小时前
Next.js从入门到实战保姆级教程:实战项目(上)——全栈博客系统架构与核心功能
开发语言·前端·javascript·react.js·系统架构
Sheldon一蓑烟雨任平生12 小时前
边框按钮(纯CSS)
前端·css·动态按钮·css变量·边框按钮·按钮动画