当前位置: 首页 > article >正文

uniapp+vue 前端防多次点击表单,防误触多次请求方法。

最近项目需求写了个uniapp+vue前端H5,有个页面提交表单的时候发现会有用户乱点导致数据库多条重复脏数据。故需要优化,多次点击表单只请求一次。

思路:

直接调用uni.showToast,点完按钮跳一个提交成功的提示。然后把防触摸穿透mask设置成true就行,最后windows.location.reload()刷新一下表单。

核心代码

写在提交按钮绑定的方法里

uni.showToast({
	title: '提交成功',
	duration: 1000,
	mask:true//true显示透明蒙层,防止触摸穿透
});
windows.location.reload()

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()
					}
				})
			}
		)
	}
}

http://www.kler.cn/a/453018.html

相关文章:

  • C 实现植物大战僵尸(一)
  • Java开发经验——数据库开发经验
  • VS Code AI开发之Copilot配置和使用详解
  • 音视频入门基础:AAC专题(13)——FFmpeg源码中,获取ADTS格式的AAC裸流音频信息的实现
  • STM32-笔记17-PWM波型
  • 05.HTTPS的实现原理-HTTPS的握手流程(TLS1.2)
  • 解决uniapp APP端切换横竖屏,页面排版崩溃问题
  • 手机IP地址:定义、查看与切换方法
  • 地理数据库Telepg面试内容整理-分布式与高可用
  • 网络安全 | 云计算中的数据加密与访问控制
  • Java学习笔记(15)——面向对象编程
  • 一个基于Rust适用于 Web、桌面、移动设备等的全栈应用程序框架
  • YOLO11改进-注意力-引入多尺度卷积注意力模块MSCAM
  • Git:远程操作
  • 【STM32】F103ZET6开发板----笔记01
  • 图像修复和编辑大一统 | 腾讯北大等联合提出BrushEdit:BrushNet进阶版来了
  • mysql的备份和还原
  • java 核心知识点——JVM
  • 时间轮在 Netty , Kafka 中的设计与实现
  • 云原生后端开发(一)
  • 数字逻辑(六)——下载Digital软件
  • 计算机视觉目标检测-1
  • ffmpeg: stream_loop报错 Error while filtering: Operation not permitted
  • 互联网视频云平台EasyDSS无人机推流直播技术如何助力野生动植物保护工作?
  • 榆能横山煤电厂及周边建筑物爆破振动和位移自动化监测
  • vue调试工具 Vue.jsDevtools