《每天少掉一根头发系列》之随手点赞养成良好习惯
哈喽，小伙伴们早上好，顺利结束了第三轮提测，最近啊，我爸对我的工作突然是有了啥误解，问我，大概意思就是，有没有遇到提交表单突然网卡刷新网页重新提交却被警告提交重复操作，被秀的一脸懵，“明明提交的时候进度条一直卡着，我刷新了下，难道就提交好了？不至于吧，是不是每次提交都可以刷新下页面就算提交了？”，emm，我一时间该怎么给您解释呢？嘿呀，我？啊啊啊啊，要有耐心，相信您会明白的
什么是表单二次提交？
表单二次提交，在web开发中经常遇到的问题，顾名思义就是指用户有意或无意对同一个表单提交了两次（多次）
表单二次提交有何利弊？
这么说吧，好处我倒是没发现，要不然为何每次都要做防二次表单提交呢。表单重复提交轻则引起系统数据出现重复，重则引起系统业务逻辑异常，导致系统数据错乱。一方面向数据库中插入大量的重复且没有意义的数据，占用服务器的资源，另一方面处理请求服务器并没有检查请求是否为重复的请求，可能会导致恶意的攻击。
那么引起表单二次提交有那些场景呢？
- 重复点击提交按钮。包括恶意的连续点击提交按钮，或因为网络慢、服务器处理速度慢等引起的用户多次点击。
- 表单提交处理完后，通过浏览器的后退按钮回到原页面再次点击提交按钮。
- 通过点击浏览器的刷新按钮，导致表单重复提交 。
- 通过浏览器的历史记录，获取表单提交的URL地址，再次访问。等等
举个栗子，比如你买东西付款，如果不禁制重复提交，用户心急点两次或者误操作点两次等，结果扣两次钱，那这不是太不人性化了嘛！，所以，说到底，应该如何防止表单二次提交呢？
如何防止表单二次提交的几种解决方案：
- 1、定义全局变量，在form提交前判断是否已有提交过
- 2、单击提交按钮后，立刻禁用改按钮
- 3、单击提交按钮后，弹出屏蔽层，防止用户第二次点击
- 4、在数据库中增加唯一性约束限制，这是最有效防止表单重复提交的方式。
- 5、...
- n、暂时我就知道这些，才疏学浅，日后有更好的解决方案或者更优雅的写法，我会如期更上来的！
那么我就开始上课了啊，小伙伴们，好好听，好好学，学废了，记得交“学费”奥，一个赞即可！
时间有限，我就重点说说第一种解决方案吧，思路都告诉你们了，授人予鱼不如授人予渔！
这是以第一种思路方案做的，小伙伴可以看下！当同一表单二次提交时，会提示：“您已发布成功，请等候...” ，并不再调用发布接口。
解决思路：
定义一个全局临时变量（标记），在每次调用提交事件的同时判断标记，在你点击提交，并且提交成功后，修改标记即可。
代码：
Page({
data: {
flog:true,
},
formSubmit: function(e) {
var that = this;
var flog = that.data.flog;
//为预防二次提交事件发生而做的防范
if (flog) {
wx.showModal({
title: '提示',
content: '确定发布该通知吗？',
success: function (res) {
if (res.confirm) {
that.issueNotice(e);
console.log('用户点击确定')
} else {
console.log('用户点击取消')
}
}
})
} else {
wx.showToast({
title: '您已成功发布，请等候...',
icon: 'none',
duration: 2000
})
}
},
issueNotice: function(e) {
var that = this;
wx.request({
method: 'POST',
url: url, //接口地址
data: {},
success: function(res) {
if (res.data.code == '200') {
wx.showToast({
title: '发布成功',
icon: 'sucess',
duration: 2000
});
//发布成功，即把标记值改换false，防止二次提交的目的就达到了！
that.setData({
flog:false,
})
setTimeout(function() {
wx.switchTab({
url: '../index/chat/chat', //返回到主界面
})
}, 2000)
} else {
wx.showToast({
title: '发布失败',
icon: 'none',
duration: 2000
})
}
},
})
}
})文章参考：
1、https://blog.csdn.net/ZHAOHAOCHENG/article/details/88559897
2、https://bbs.csdn.net/topics/310222282
往期回顾：
【2】图片怎么保存本地？
❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。
