前后端防重复提交

数据重复提交是一个大忌,会带来无效数据,应该在前端和后端都建议检测防范。

前端一般是按钮按下触发数据提交,如果用户鼠标操作习惯不好,或者鼠标或系统设置问题会导致鼠标连击,如果前端不做相关处理,可能会触发多次提交操作。

那么怎么处理为好呢?首先,按下按钮按下事件触发函数中,可以考虑禁用按钮,等待提交正常返回后,重置页面填报项信息,然后再启用按钮,如果是错误返回,那么提示错误信息,可以不重置页面填报,然后再启用按钮。

javascript 复制代码
$("#button_submit").click(()=>{
	validate_input();
	$("#button_submit").attr("disabled",true); 
	axios.post(ifurl,jsondata).then(res=> {
		if (res.data.code=="200") {
			alert("提交成功");
			reset_input();
			$("#button_submit").attr("disabled",false);
			}
		else { alert(res.data.msg); $("#button_submit").attr("disabled",false); }
		}).catch(err => { alert("后端服务器错,请稍后再提交"); $("#button_submit").attr("disabled",false); });
	});

当然后端也不能盲目信任前端,还是要采取措施防止前端重复提交无效数据。

javascript 复制代码
...
var lastpost=[];
...
app.post("/postargs", express.json(), (req, res) => {
	let thispt=Date.now();
	let chktime=lastpost.find(item=>(item.uid=req.session.user.userid));
	if (chktime==undefined) { lastpost.push({uid:req.session.user.userid,lastpt:thispt}) }
	else {
		if (thispt<chktime.lastpt+500) return(res.json({"msg":"拒上次提交不到半秒,疑似误连击,暂不接收本次提交,有疑问请重新提交"}))
		else { chktime.lastpt=thispt; }
		}

例子中是拒绝半秒以内的相同用户的提交,可以根据具体场景调整策略,非登录情况,可以考虑进入页面时,向服务器申请获得一个短时间内有效的ReqID,提交时带上。

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
程序员岳焱6 小时前
Java 与 MySQL 性能优化:Java 实现百万数据分批次插入的最佳实践
后端·mysql·性能优化
麦兜*6 小时前
Spring Boot启动优化7板斧(延迟初始化、组件扫描精准打击、JVM参数调优):砍掉70%启动时间的魔鬼实践
java·jvm·spring boot·后端·spring·spring cloud·系统架构
KK溜了溜了6 小时前
JAVA-springboot 整合Redis
java·spring boot·redis
大只鹅7 小时前
解决 Spring Boot 对 Elasticsearch 字段没有小驼峰映射的问题
spring boot·后端·elasticsearch
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js