表單重復提交問題

2019獨角獸企業重金招聘Python工程師標準>>> hot3.png

為什么會發生表單重復提交呢?

網絡延時

?在平時開發中,如果網速比較慢的情況下,用戶提交表單后,發現服務器半天都沒有響應,那么用戶可能會以為是自己沒有提交表單,就會再點擊提交按鈕重復提交表單,我們在開發中必須防止表單重復提交。

重新刷新

表單提交后用戶點擊【刷新】按鈕導致表單重復提交

點擊瀏覽器的【后退】按鈕回退到表單頁面后進行再次提交

用戶提交表單后,點擊瀏覽器的【后退】按鈕回退到表單頁面后進行再次提交

?

解決方案

使用javascript 解決

<script type="text/javascript">var isFlag = false; //表單是否已經提交標識,默認為falsefunction submitFlag() {if (!isFlag) {isFlag = true;return true;} else {return false;}}
</script>

2

function dosubmit(){//獲取表單提交按鈕var btnSubmit = document.getElementById("submit");//將表單提交按鈕設置為不可用,這樣就可以避免用戶再次點擊提交按鈕btnSubmit.disabled= "disabled";//返回true讓表單可以正常提交return true;
}

使用后端提交解決

?對于【場景二】和【場景三】導致表單重復提交的問題,既然客戶端無法解決,那么就在服務器端解決,在服務器端解決就需要用到session了。

? 具體的做法:在服務器端生成一個唯一的隨機標識號,專業術語稱為Token(令牌),同時在當前用戶的Session域中保存這個Token。然后將Token發送到客戶端的Form表單中,在Form表單中使用隱藏域來存儲這個Token,表單提交的時候連同這個Token一起提交到服務器端,然后在服務器端判斷客戶端提交上來的Token與服務器端生成的Token是否一致,如果不一致,那就是重復提交了,此時服務器端就可以不處理重復提交的表單。如果相同則處理表單提交,處理完后清除當前用戶的Session域中存儲的標識號。
? 在下列情況下,服務器程序將拒絕處理用戶提交的表單請求:

1.?????? 存儲Session域中的Token(令牌)與表單提交的Token(令牌)不同。

2.?????? 當前用戶的Session中不存在Token(令牌)

3.?????? 用戶提交的表單數據中沒有Token(令牌)

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Form表單</title></head><body><form action="${pageContext.request.contextPath}/DoFormServlet"method="post" onsubmit="return dosubmit()"><input type="hidden" name="token" value="${sesionToken}"> 用戶名:<input type="text"name="userName"> <input type="submit" value="提交" id="submit"></form>
</body>
</html>
@WebServlet("/DoFormServlet")
public class DoFormServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("UTF-8");boolean flag = isFlag(req);if (!flag) {resp.getWriter().write("已經提交...");System.out.println("數據已經提交了..");return;}String userName = req.getParameter("userName");try {Thread.sleep(300);} catch (Exception e) {// TODO: handle exception}System.out.println("往數據庫插入數據...." + userName);resp.getWriter().write("success");}public boolean isFlag(HttpServletRequest request) {HttpSession session = request.getSession();String sesionToken = (String) session.getAttribute("sesionToken");String token = request.getParameter("token");if (!(token.equals(sesionToken))) {return false;}session.removeAttribute("sesionToken");return true;}
}

簡單來說:通過session吧sessionTonken傳到前端,然后前端input使用隱藏域來保存sessionToken,name是tonken,在后臺獲取到sessionTonken和tonken的值,對比一下,第一次的時候肯定會true,然后就刪除sessionTonken的值,第二次在對比一下,肯定是false了

轉載于:https://my.oschina.net/u/3578766/blog/1605683

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/278625.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/278625.shtml
英文地址,請注明出處:http://en.pswp.cn/news/278625.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

js事件名稱集

一般事件 名稱描述onClick鼠標點擊事件&#xff0c;多用在某個對象控制的范圍內的鼠標點擊onDblClick鼠標雙擊事件onMouseDown鼠標上的按鈕被按下了onMouseUp鼠標按下后&#xff0c;松開時激發的事件onMouseOver當鼠標移動到某對象范圍的上方時觸發的事件onMouseMove鼠標移動時…

chrome 網頁重新加載_在Chrome中為各個網頁設置自定義重新加載時間

chrome 網頁重新加載Do you have a webpage that needs to be reloaded every so often or perhaps you have multiple webpages that each need their own individual reload time? Now you can have the best of both with the AutoReloader extension for Google Chrome. 您…

VMware Tools安裝和卸載

1、卸載 a.查找 vmware-uninstall-tools.pl 路徑&#xff1a;sudo find / -name vmware-uninstall-tools.pl b.切換到 vmware-unistall-tools.pl 目錄&#xff1a;cd /usr/bin/ c.卸載&#xff1a;sudo perl vmware-uninstall-tools.pl 2、安裝 a.掛載&#xff1a;sudo mount /…

MySQL解決方案

主從復制與主主復制怎么自動切換&#xff1a;使用Keepalived 日常如何導出數據&#xff1a;mysqldump、xtrabackup 主庫宕機解決方案&#xff08;一主多從&#xff09; 登陸從庫>show processlist\G; #cat /data/3306/data/master.info #cat /data/3307/data/master.ii…

iphone解鎖_有人可以用解鎖的iPhone做的最糟糕的事情是什么?

iphone解鎖Dedi Grigoroiu/Shutterstock.comDedi Grigoroiu / Shutterstock.comWe use our phones for event tickets, reservations, insurance cards, and even driver’s licenses. But what happens when someone takes your unlocked iPhone out of view for a moment—wh…

Alamofire源碼導讀二:發起請求及內部加鎖的邏輯

以創建一個 DataRequest 為例子 &#xfffc; 發起請求 創建 SessionManager 順帶也創建了一個 SessionDelegate 持有一個urlSession&#xff0c;持有一個串行的 DispatchQueue A。注意&#xff0c;這個不是urlSession 回調方法執行時所在的OperationQueue 創建 Requestable 的…

python os.path模塊

os.path.abspath(path) #返回絕對路徑os.path.basename(path) #返回文件名os.path.commonprefix(list) #返回list(多個路徑)中&#xff0c;所有path共有的最長的路徑。os.path.dirname(path) #返回文件路徑os.path.exists(path) #路徑存在則返回True,路徑損壞返回Falseos.path…

讓動畫每次重復前都有延遲

動畫不從0%開始即可 keyframes textmove {20% {transform: translateX(0);}100% {transform: translateX(-100%);} }

bixby映射軟件下載_如何在Samsung Galaxy S8,S9,S10,Note 8或Note 9上重新映射Bixby按鈕...

bixby映射軟件下載We’ve said before, and we’ll say it again: Bixby sucks. You’re better off using Google Assistant any day of the week. The good news is, it’s now possible to remap the pointless Bixby button without using a third-party app. 我們之前已經…

JavaScript數據結構和算法

前言 在過去的幾年中&#xff0c;得益于Node.js的興起&#xff0c;JavaScript越來越廣泛地用于服務器端編程。鑒于JavaScript語言已經走出了瀏覽器&#xff0c;程序員發現他們需要更多傳統語言&#xff08;比如C和Java&#xff09;提供的工具。這些工具包括傳統的數據結構&…

選擇器

// 什么是 HTML 以及怎樣使用 HTML 編寫網頁 // 網頁的結構是怎樣 // 什么是 CSS 以及怎樣使用 CSS // 如何在網頁中引入 JavaScript 代碼 // 什么是 DOM, 常用 DOM API 使用 // document object model // application program interface // 什么是事件, 如何綁定事件 // // 應…

vue3打包后無法加載頁面

1、配置輸出路徑 // vue.config.js module.exports {publicPath: ./ }2、不能使用history路由 // ... export default new Router({// mode: history, routes: [{path: /,name: home,component: Home}] })

如何使用Avira Rescue CD清潔感染的PC

When you’ve got a PC completely infected with viruses, sometimes it’s best to reboot into a rescue disc and run a full virus scan from there. Here’s how to use the Avira Rescue CD to clean an infected PC. 當您的PC完全感染了病毒時&#xff0c;有時最好重新…

匯編語言第二章總結

第二章 寄存器 (1) 字數據在寄存器中的存放 一個字由兩個字節組成&#xff0c;可以存在一個16位寄存器中。 字的高8位 → 存放于通用寄存器的高8位寄存器 字的低8位 → 存放于通用寄存器的低8位寄存器。 例&#xff1a;十進制數據&#xff1a; 20000 → AX 對應的二進制…

Vue組件的三種調用方式

最近在寫fj-service-system的時候&#xff0c;遇到了一些問題。那就是我有些組件&#xff0c;比如Dialog、Message這樣的組件&#xff0c;是引入三方組件庫&#xff0c;比如element-ui這樣的&#xff0c;還是自己實現一個&#xff1f;雖然它們有按需引入的功能&#xff0c;但是…

axios把post的RequestPayload格式轉為formdata

方法一&#xff1a;配置transformRequest&#xff0c;缺點&#xff1a;其他請求格式的數據也會被重新格式化&#xff08;PUT&#xff0c;PATCH&#xff09; const service axios.create({//設置axios為form-data 方法1// headers: {// post: {// "Content-T…

火狐打印預覽_將打印和打印預覽命令添加到Firefox的上下文菜單

火狐打印預覽Have you been thinking about how much easier it would be to having the Print & Print Preview commands in Firefox’s Context Menu? The Print Context Menu extension for Firefox allows you to avoid having to use the File Menu to access the pr…

每個人都要在自己的“時區”里找到自己的快樂

祝小妹和自己生日快樂&#xff0c;人人都想快樂&#xff0c;卻在平常的365天悶悶不樂&#xff0c;但愿家人朋友在平常的每一天都很夠健康快樂&#xff01; 在我那個開不了機的手機記事薄有句話還記得&#xff1a;你們不要刻意等我&#xff0c;因為可能現在的我還沒來得及去發現…

《2017 云計算評測報告》:帶你了解 AWS、阿里云、騰訊云等八家云計算服務提供商的綜合用戶體驗情況...

報告電子版至聽云官方博客下載&#xff1a;http://blog.tingyun.com/web/article/detail/1352 評測說明 評測目標&#xff1a;同一應用&#xff08;網站&#xff09;在不同云上的用戶訪問體驗&#xff0c;以及對云資源的使用 洞察周期及范圍&#xff1a;2017年4月-2017年9月 訪…

js以變量為鍵

let key "dynamic",obj{[key]:true }; obj[key2]key console.log(obj)一般在配置文件中應用較多