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()
					}
				})
			}
		)
	}
}
相关推荐
愚公移码11 分钟前
蓝凌EKP产品:关联机制浅析
java·服务器·前端
汉堡go43 分钟前
python_chapter6
前端·数据库·python
wusp19941 小时前
v-model 和 :value 的深度解析
前端·javascript·vue.js
Code知行合壹1 小时前
Vue项目中SVG图标
前端·vue.js
SJLoveIT1 小时前
【安全研发】CSRF (跨站请求伪造) 深度复盘与防御体系
前端·安全·csrf
pas1361 小时前
34-mini-vue 更新element的children-双端对比diff算法
javascript·vue.js·算法
小二·1 小时前
Python Web 开发进阶实战:数字孪生平台 —— 在 Flask + Vue 中构建实时物理世界镜像
前端·vue.js·python
CHU7290351 小时前
安心陪伴,便捷就医:陪诊代办小程序的温暖设计
前端·小程序·php
ashcn20011 小时前
websocket测试通信
前端·javascript·websocket
weixin_404679311 小时前
edge alt tab怎么关
前端·edge