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()
					}
				})
			}
		)
	}
}
相关推荐
Bernard02151 分钟前
给普通人的 AI 黑话翻译手册:一文看懂 LLM、RAG、Agent 到底是什么
前端·后端
恋猫de小郭1 分钟前
JetBrains Amper 0.10 ,期待它未来替代 Gradle
android·前端·flutter
胖纳特3 分钟前
Seafile 文件预览增强方案:集成 BaseMetas Fileview 突破格式限制
前端·后端
小贵子的博客3 分钟前
Ant Design Vue中 table组件设置分组表头和固定总结栏
vue.js·anti-design-vue
梵得儿SHI5 分钟前
Vue 3 工程化实践:多页面路由配置 + Pinia 状态管理完全指南
前端·javascript·vue.js·vuerouter4·pinia状态管理的·模块化store设计·路由与状态管理
小李子呢02118 分钟前
为什么会有react和vue这些框架的出现
前端·vue.js·react.js
军训猫猫头8 分钟前
7.带输入参数的线程启动 C# + WPF 完整示例
开发语言·前端·c#·.net·wpf
CodeSheep9 分钟前
同事偷偷给我介绍私活,说1万报酬全给我,结果甲方私下告诉我说,同事在当中白拿了2万,我觉得被耍了,媳妇却让我要知足,说我一点不亏
前端·后端·程序员
Betelgeuse7610 分钟前
告别传统 ModelForm:用 React 与 DRF 打造现代化项目管理表单
前端·react.js·django·前端框架
IT_陈寒11 分钟前
SpringBoot这个"自动配置"差点让我加班到凌晨
前端·人工智能·后端