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()
					}
				})
			}
		)
	}
}
相关推荐
踩着两条虫13 分钟前
VTJ:技术架构概述
前端·架构·ai编程
超级无敌攻城狮15 分钟前
Agent 到底是怎么跑起来的
前端·后端·架构
吴声子夜歌22 分钟前
Vue3——过度和动画效果
前端·vue.js·es6
Via_Neo24 分钟前
字符串类型的相互转换
前端
zopple1 小时前
前端三剑客 vs Vue.js:核心区别解析
前端·javascript·vue.js
hsjcjh1 小时前
窗口函数-详细讲解分析
java·服务器·前端
CDN3601 小时前
【踩坑实录】前端开发必看:一次由CSS缓存引发的线上事故与SEO反思
前端·css·缓存
胡志辉的博客1 小时前
本地明明好好的,怎么一上线就跨域了?把同源策略、前后端分工和 CORS 一次讲明白
前端·javascript·vue.js·reactjs·nextjs·跨域
|晴 天|1 小时前
文章系列管理系统:拖拽排序与进度追踪
前端·vue.js·typescript
GISer_Jing1 小时前
AI Agent接口终局:MCP有弊端,CLI凭什么成为主流?
前端·人工智能