《每天少掉一根頭髮系列》之隨手點贊養成良好習慣
哈嘍，小夥伴們早上好，順利結束了第三輪提測，最近啊，我爸對我的工作突然是有了啥誤解，問我，大概意思就是，有沒有遇到提交表單突然網卡刷新網頁重新提交卻被警告提交重複操作，被秀的一臉懵，“明明提交的時候進度條一直卡着，我刷新了下，難道就提交好了？不至於吧，是不是每次提交都可以刷新下頁面就算提交了？”，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】
❤鑑於個人經驗有限，所有觀點及技術研點，如有異議，請直接回復討論（請勿發表攻擊言論）。