防止重複提交表單

時間 2019-11-05

標籤防止重複提交表單欄目 HTML 简体版

原文原文鏈接

在平時開發中，若是網速比較慢的狀況下，用戶提交表單後，發現服務器半天都沒有響應，那麼用戶可能會覺得是本身沒有提交表單，就會再點擊提交按鈕重複提交表單，咱們在開發中必須防止表單重複提交。javascript

1、表單重複提交的常見應用場景

有以下的form.jsp頁面html

 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進行處理java

 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.一、場景一：在網絡延遲的狀況下讓用戶有時間點擊屢次submit按鈕致使表單重複提交

　　演示動畫以下所示：設計模式

1.二、場景二：表單提交後用戶點擊【刷新】按鈕致使表單重複提交

演示動畫以下所示：瀏覽器

　　點擊瀏覽器的刷新按鈕，就是把瀏覽器上次作的事情再作一次，由於這樣也會致使表單重複提交。服務器

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

演示動畫以下所示：網絡

2、利用JavaScript防止表單重複提交

　　既然存在上述所說的表單重複提交問題，那麼咱們就要想辦法解決，比較經常使用的方法是採用JavaScript來防止表單重複提交，具體作法以下：session

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

 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防止表單重複提交的作法只對上述提交到致使表單重複提交的三種場景中的【場景一】有效，而對於【場景二】和【場景三】是沒有用，依然沒法解決表單重複提交問題。

3、利用Session防止表單重複提交

　　對於【場景二】和【場景三】致使表單重複提交的問題，既然客戶端沒法解決，那麼就在服務器端解決，在服務器端解決就須要用到session了。

　　具體的作法：在服務器端生成一個惟一的隨機標識號，專業術語稱爲Token(令牌)，同時在當前用戶的Session域中保存這個Token。而後將Token發送到客戶端的Form表單中，在Form表單中使用隱藏域來存儲這個Token，表單提交的時候連同這個Token一塊兒提交到服務器端，而後在服務器端判斷客戶端提交上來的Token與服務器端生成的Token是否一致，若是不一致，那就是重複提交了，此時服務器端就能夠不處理重複提交的表單。若是相同則處理表單提交，處理完後清除當前用戶的Session域中存儲的標識號。
　　在下列狀況下，服務器程序將拒絕處理用戶提交的表單請求：

存儲Session域中的Token(令牌)與表單提交的Token(令牌)不一樣。
當前用戶的Session中不存在Token(令牌)。
用戶提交的表單數據中沒有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中的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             //一、若是用戶提交的表單數據中沒有token，則用戶是重複提交了表單33             if(client_token==null){34                 return true;35             }36             //取出存儲在Session中的token37             String server_token = (String) request.getSession().getAttribute("token");38             //二、若是當前用戶的Session中不存在Token(令牌)，則用戶是重複提交了表單39             if(server_token==null){40                 return true;41             }42             //三、存儲在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      *一、把類的構造函數私有13      *二、本身建立一個類的對象14      *三、對外提供一個公共的方法，返回類的對象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頁面，此次是在服務器端處理表單重複提交的，運行效果以下：

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。