當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

防止重复提交表单

發布時間：2025/3/21 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了防止重复提交表单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

一、表單重復提交的常見應用場景

有如下的form.jsp頁面

?1?<%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%>?2?<!DOCTYPE?HTML>?3?<html>?4???<head>?5?????<title>Form表單</title>?6???</head>?7????8???<body>?9???????<form?action="${pageContext.request.contextPath}/servlet/DoFormServlet"?method="post">10?????????用戶名：<input?type="text"?name="username">11?????????<input?type="submit"?value="提交"?id="submit">12?????</form>13???</body>14?</html>

　　form表單提交到DoFormServlet進行處理

　　如果沒有進行form表單重復提交處理，那么在網絡延遲的情況下下面的操作將會導致form表單重復提交多次

1.1、場景一：在網絡延遲的情況下讓用戶有時間點擊多次submit按鈕導致表單重復提交

　　演示動畫如下所示：

?1.2、場景二：表單提交后用戶點擊【刷新】按鈕導致表單重復提交

演示動畫如下所示：

　　點擊瀏覽器的刷新按鈕，就是把瀏覽器上次做的事情再做一次，因為這樣也會導致表單重復提交。

1.3、場景三：用戶提交表單后，點擊瀏覽器的【后退】按鈕回退到表單頁面后進行再次提交

演示動畫如下所示：

二、利用JavaScript防止表單重復提交

　　既然存在上述所說的表單重復提交問題，那么我們就要想辦法解決，比較常用的方法是采用JavaScript來防止表單重復提交，具體做法如下：

修改form.jsp頁面，添加如下的JavaScript代碼來防止表單重復提交

?1?<%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%>?2?<!DOCTYPE?HTML>?3?<html>?4???<head>?5?????<title>Form表單</title>?6?????????<script?type="text/javascript">?7?????????var?isCommitted?=?false;//表單是否已經提交標識，默認為false?8?????????function?dosubmit(){?9?????????????if(isCommitted==false){10?????????????????isCommitted?=?true;//提交表單后，將表單是否已經提交標識設置為true11?????????????????return?true;//返回true讓表單正常提交12?????????????}else{13?????????????????return?false;//返回false那么表單將不提交14?????????????}15?????????}16?????</script>17???</head>18???19???<body>20???????<form?action="${pageContext.request.contextPath}/servlet/DoFormServlet"?onsubmit="return?dosubmit()"?method="post">21?????????用戶名：<input?type="text"?name="username">22?????????<input?type="submit"?value="提交"?id="submit">23?????</form>24???</body>25?</html>

　　我們看看使用了JavaScript來防止表單提交重復是否可以成功，運行效果如下：

　　可以看到，針對"在網絡延遲的情況下讓用戶有時間點擊多次submit按鈕導致表單重復提交"這個應用場景，使用JavaScript是可以解決這個問題的，解決的做法就是"用JavaScript控制Form表單只能提交一次"。

　　除了用這種方式之外，經常見的另一種方式就是表單提交之后，將提交按鈕設置為不可用，讓用戶沒有機會點擊第二次提交按鈕，代碼如下：

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

運行效果如下：

?　　另外還有一種做法就是提交表單后，將提交按鈕隱藏起來，這種做法和將提交按鈕設置為不可用是差不多的，個人覺得將提交按鈕隱藏影響到頁面布局的美觀，并且可能會讓用戶誤以為是bug(怎么我一點擊按鈕，按鈕就不見了呢？用戶可能會有這樣的疑問)，我個人在開發中用得比較多的是表單提交后，將提交按鈕設置為不可用，反正使用JavaScript防止表單重復提交的做法都是差不多的，目的都是讓表單只能提交一次，這樣就可以做到表單不重復提交了。

　　使用JavaScript防止表單重復提交的做法只對上述提交到導致表單重復提交的三種場景中的【場景一】有效，而對于【場景二】和【場景三】是沒有用，依然無法解決表單重復提交問題。

三、利用Session防止表單重復提交

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

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

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

當前用戶的Session中不存在Token(令牌)。

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

看具體的范例：

　　1.創建FormServlet，用于生成Token(令牌)和跳轉到form.jsp頁面

　　2.在form.jsp中使用隱藏域來存儲Token(令牌)

?1?<%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%>?2?<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">?3?<html>?4?<head>?5?<title>form表單</title>?6?</head>?7??8?<body>?9?????<form?action="${pageContext.request.contextPath}/servlet/DoFormServlet"?method="post">10?????????<%--使用隱藏域存儲生成的token--%>11?????????<%--12?????????????<input?type="hidden"?name="token"?value="<%=session.getAttribute("token")?%>">13?????????--%>14?????????<%--使用EL表達式取出存儲在session中的token--%>15?????????<input?type="hidden"?name="token"?value="${token}"/>?16?????????用戶名：<input?type="text"?name="username">?17?????????<input?type="submit"?value="提交">18?????</form>19?</body>20?</html>

　　3.DoFormServlet處理表單提交

?1?package?xdp.gacl.session;?2??3?import?java.io.IOException;?4?import?javax.servlet.ServletException;?5?import?javax.servlet.http.HttpServlet;?6?import?javax.servlet.http.HttpServletRequest;?7?import?javax.servlet.http.HttpServletResponse;?8??9?public?class?DoFormServlet?extends?HttpServlet?{10?11?????public?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)12?????????????????throws?ServletException,?IOException?{13?14?????????????boolean?b?=?isRepeatSubmit(request);//判斷用戶是否是重復提交15?????????????if(b==true){16?????????????????System.out.println("請不要重復提交");17?????????????????return;18?????????????}19?????????????request.getSession().removeAttribute("token");//移除session中的token20?????????????System.out.println("處理用戶提交請求！！");21?????????}22?????????23?????????/**24??????????*?判斷客戶端提交上來的令牌和服務器端生成的令牌是否一致25??????????*?@param?request26??????????*?@return?27??????????*?????????true?用戶重復提交了表單? 28??????????*?????????false?用戶沒有重復提交表單29??????????*/30?????????private?boolean?isRepeatSubmit(HttpServletRequest?request)?{31?????????????String?client_token?=?request.getParameter("token");32?????????????//1、如果用戶提交的表單數據中沒有token，則用戶是重復提交了表單33?????????????if(client_token==null){34?????????????????return?true;35?????????????}36?????????????//取出存儲在Session中的token37?????????????String?server_token?=?(String)?request.getSession().getAttribute("token");38?????????????//2、如果當前用戶的Session中不存在Token(令牌)，則用戶是重復提交了表單39?????????????if(server_token==null){40?????????????????return?true;41?????????????}42?????????????//3、存儲在Session中的Token(令牌)與表單提交的Token(令牌)不同，則用戶是重復提交了表單43?????????????if(!client_token.equals(server_token)){44?????????????????return?true;45?????????????}46?????????????47?????????????return?false;48?????????}49?50?????public?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)51?????????????throws?ServletException,?IOException?{52?????????doGet(request,?response);53?????}54?55?}

　　生成Token的工具類TokenProccessor

?1?package?xdp.gacl.session;?2??3?import?java.security.MessageDigest;?4?import?java.security.NoSuchAlgorithmException;?5?import?java.util.Random;?6?import?sun.misc.BASE64Encoder;?7??8?public?class?TokenProccessor?{?9?10?????/*11??????*單例設計模式（保證類的對象在內存中只有一個）12??????*1、把類的構造函數私有13??????*2、自己創建一個類的對象14??????*3、對外提供一個公共的方法，返回類的對象15??????*/16?????private?TokenProccessor(){}17?????18?????private?static?final?TokenProccessor?instance?=?new?TokenProccessor();19?????20?????/**21??????*?返回類的對象22??????*?@return23??????*/24?????public?static?TokenProccessor?getInstance(){25?????????return?instance;26?????}27?????28?????/**29??????*?生成Token30??????*?Token：Nv6RRuGEVvmGjB+jimI/gw==31??????*?@return32??????*/33?????public?String?makeToken(){??//checkException34?????????//??7346734837483??834u938493493849384??4343438435?????????String?token?=?(System.currentTimeMillis()?+?new?Random().nextInt(999999999))?+?"";36?????????//數據指紋???128位長???16個字節??md537?????????try?{38?????????????MessageDigest?md?=?MessageDigest.getInstance("md5");39?????????????byte?md5[]?=??md.digest(token.getBytes());40?????????????//base64編碼--任意二進制編碼明文字符???adfsdfsdfsf41?????????????BASE64Encoder?encoder?=?new?BASE64Encoder();42?????????????return?encoder.encode(md5);43?????????}?catch?(NoSuchAlgorithmException?e)?{44?????????????throw?new?RuntimeException(e);45?????????}46?????}47?}

　　首先訪問FormServlet，在FormServlet中生成Token之后再重定向到form.jsp頁面，這次是在服務器端處理表單重復提交的，運行效果如下：

　　從運行效果中可以看到，通過這種方式處理表單重復提交，可以解決上述的場景二和場景三中出現的表單重復提交問題。

from:?https://my.oschina.net/u/2253208/blog/604069

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的防止重复提交表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

表单

上一篇：使用强大的 Mockito 测试框架来测
下一篇：什么是Code Review 代码审查