標籤：操作 comm tool 瀏覽器 並且 出現 表單重複提交 let dfs
申明:此文章屬於轉載, 轉自部落格: http://www.cnblogs.com/xdp-gacl/p/3859416.html
在平時開發中，如果網速比較慢的情況下，使用者提交表單後，探索服務器半天都沒有響應，那麼使用者可能會以為是自己沒有提交表單，就會再點擊提交按鈕重複提交表單，我們在開發中必須防止表單重複提交。
有如下的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進行處理
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 //用戶端是以UTF-8編碼傳輸資料到伺服器端的，所以需要設定伺服器端以UTF-8的編碼進行接收，否則對於中文資料就會產生亂碼14 request.setCharacterEncoding("UTF-8");15 String userName = request.getParameter("username");16 try {17 //讓當前的線程睡眠3秒鐘，類比網路延遲而導致表單重複提交的現象18 Thread.sleep(3*1000);19 } catch (InterruptedException e) {20 e.printStackTrace();21 }22 System.out.println("向資料庫中插入資料："+userName);23 }24 25 public void doPost(HttpServletRequest request, HttpServletResponse response)26 throws ServletException, IOException {27 doGet(request, response);28 }29 30 }
如果沒有進行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域中儲存的標識號。
在下列情況下，伺服器程式將拒絕處理使用者提交的表單請求：
看具體的範例：
1.建立FormServlet，用於產生Token(令牌)和跳轉到form.jsp頁面
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 FormServlet extends HttpServlet {10 private static final long serialVersionUID = -884689940866074733L;11 12 public void doGet(HttpServletRequest request, HttpServletResponse response)13 throws ServletException, IOException {14 15 String token = TokenProccessor.getInstance().makeToken();//建立令牌16 System.out.println("在FormServlet中產生的token："+token);17 request.getSession().setAttribute("token", token); //在伺服器使用session儲存token(令牌)18 request.getRequestDispatcher("/form.jsp").forward(request, response);//跳轉到form.jsp頁面19 }20 21 public void doPost(HttpServletRequest request, HttpServletResponse response)22 throws ServletException, IOException {23 doGet(request, response);24 }25 26 }
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頁面，這次是在伺服器端處理表單重複提交的，運行效果如下：
從運行效果中可以看到，通過這種方式處理表單重複提交，可以解決上述的情境二和情境三中出現的表單重複提交問題。
[Java拾遺五]使用Session防止表單重複提交
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
