鍍金池/ 問答/數(shù)據(jù)庫  HTML/ 有什么方法能阻止“狂點提交按鈕數(shù)據(jù)多次插入mysql”

有什么方法能阻止“狂點提交按鈕數(shù)據(jù)多次插入mysql”

環(huán)境:dva.js mysql antd react
圖片描述

這是我做的投票,用戶提交一次投票后,頁面會刷新,然后提交按鈕會被禁用。
主要邏輯就是在數(shù)據(jù)庫去查,這個用戶在這個主題是不是已經(jīng)投過票了,投過了就傳個check=true的值回來,把button禁用掉。

但是第一次投票時,頁面刷新不及時,狂點提交按鈕可以多次投票。
有什么前后端或數(shù)據(jù)庫的技術(shù)能夠阻止這個現(xiàn)象?

圖片描述
這是我的button的click函數(shù),可以看到第一個dispatch傳數(shù)據(jù)給后臺生成投票的記錄。第二個dispatch就是刷新了頁面。

回答
編輯回答
影魅

做積極更新,點擊后立即變灰,萬一投票不成功再變回來,而不是等投票成功后再更新。

當然,最好防抖動也加上。

2017年6月4日 17:48
編輯回答
拼未來

前端,可以函數(shù)節(jié)流;也可以直接聲明一個變量默認為a=false,點擊button了就為a=true,當a為true的時候,把button置灰,進行ajax請求,請求成功,ok,請求失敗,button恢復(fù),重新提交,你也可以看一看函數(shù)節(jié)流方面的,前端防止誤觸和雙擊,。。。。也許會有所幫助,當然了,這種情況下,前端的處理要更自然一些,如果不置灰按鈕的話,也可以,點擊按鈕之后,直接有一個模態(tài)層,顯示一下提交進度條什么的,當然這個模態(tài)層你可以通過ajax返回狀態(tài)判斷是否關(guān)閉,也可以主動的加一些定時器,更加友好一些

2017年9月25日 05:31
編輯回答
菊外人

多次提交只響應(yīng)第一次
const onClickpublish = async () => {

if(this.pending) return
this.pending = true
await dispatch(...)
this.pending = false
dispatch(...)

}

2017年5月4日 22:39
編輯回答
紓惘

我是感覺限制應(yīng)該在前后端都加上,前端可以在首次提交時緩存一個投票的標志位,然后每次提交時都檢查下這個標志位是否存在;另外也建議在提交的信息里直接帶上用戶標識,這樣后端每次收到信息時check下是否提交過,如果提交過返回一個error信息給前端就好。盡量不要把檢查和提交的步驟在前端可見,否則等于把判斷邏輯都放到前端了,那不就跟在前端直接寫庫沒區(qū)別了?另外前端也做下防抖,避免短時間內(nèi)的多次提交。

2018年3月11日 05:09