1. 程式人生 > >JavaWeb學習總結(十三)——使用Session防止表單重復提交(轉)

JavaWeb學習總結(十三)——使用Session防止表單重復提交(轉)

Coding etc pub submit exce sdf patch 傳輸 alt

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

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

有如下的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;//提交表單後,將表單是否已經提交標識設置為true
11                 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. 存儲Session域中的Token(令牌)與表單提交的Token(令牌)不同。
  2. 當前用戶的Session中不存在Token(令牌)
  3. 用戶提交的表單數據中沒有Token(令牌)

看具體的範例:

  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中的token
20             System.out.println("處理用戶提交請求!!");
21         }
22         
23         /**
24          * 判斷客戶端提交上來的令牌和服務器端生成的令牌是否一致
25          * @param request
26          * @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中的token
37             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      * @return
23      */
24     public static TokenProccessor getInstance(){
25         return instance;
26     }
27     
28     /**
29      * 生成Token
30      * Token:Nv6RRuGEVvmGjB+jimI/gw==
31      * @return
32      */
33     public String makeToken(){  //checkException
34         //  7346734837483  834u938493493849384  43434384
35         String token = (System.currentTimeMillis() + new Random().nextInt(999999999)) + "";
36         //數據指紋   128位長   16個字節  md5
37         try {
38             MessageDigest md = MessageDigest.getInstance("md5");
39             byte md5[] =  md.digest(token.getBytes());
40             //base64編碼--任意二進制編碼明文字符   adfsdfsdfsf
41             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頁面,這次是在服務器端處理表單重復提交的,運行效果如下:

技術分享圖片

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

JavaWeb學習總結(十三)——使用Session防止表單重復提交(轉)