使用Session防止表單重復提交


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


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

有如下的form.jsp頁面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>Form表單</title>
  </head>
  
  <body>
      <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" method="post">
        用戶名:<input type="text" name="username">
        <input type="submit" value="提交" id="submit">
    </form>
  </body>
</html>

form表單提交到DoFormServlet進行處理

package xdp.gacl.session;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DoFormServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //客戶端是以UTF-8編碼傳輸數據到服務器端的,所以需要設置服務器端以UTF-8的編碼進行接收,否則對于中文數據就會產生亂碼
        request.setCharacterEncoding("UTF-8");
        String userName = request.getParameter("username");
        try {
            //讓當前的線程睡眠3秒鐘,模擬網絡延遲而導致表單重復提交的現象
            Thread.sleep(3*1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        System.out.println("向數據庫中插入數據:"+userName);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

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


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

==場景二==:表單提交后用戶點擊【刷新】按鈕導致表單重復提交

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


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

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

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>Form表單</title>
        <script type="text/javascript">
        var isCommitted = false;//表單是否已經提交標識,默認為false
        function dosubmit(){
            if(isCommitted==false){
                isCommitted = true;//提交表單后,將表單是否已經提交標識設置為true
                return true;//返回true讓表單正常提交
            }else{
                return false;//返回false那么表單將不提交
            }
        }
    </script>
  </head>
  
  <body>
      <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" onsubmit="return dosubmit()" method="post">
        用戶名:<input type="text" name="username">
        <input type="submit" value="提交" id="submit">
    </form>
  </body>
</html>

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

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>Form表單</title>
        <script type="text/javascript">
        var isCommitted = false;//表單是否已經提交標識,默認為false
        function dosubmit(){
            if(isCommitted==false){
                isCommitted = true;//提交表單后,將表單是否已經提交標識設置為true
                return true;//返回true讓表單正常提交
            }else{
                return false;//返回false那么表單將不提交
            }
        }
    </script>
  </head>
  
  <body>
      <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" onsubmit="return dosubmit()" method="post">
        用戶名:<input type="text" name="username">
        <input type="submit" value="提交" id="submit">
    </form>
  </body>
</html>

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

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

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

另外還有一種做法就是提交表單后,將提交按鈕隱藏起來,這種做法和將提交按鈕設置為不可用是差不多的,個人覺得將提交按鈕隱藏影響到頁面布局的美觀,并且可能會讓用戶誤以為是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頁面

package xdp.gacl.session;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FormServlet extends HttpServlet {
    private static final long serialVersionUID = -884689940866074733L;

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String token = TokenProccessor.getInstance().makeToken();//創建令牌
        System.out.println("在FormServlet中生成的token:"+token);
        request.getSession().setAttribute("token", token);  //在服務器使用session保存token(令牌)
        request.getRequestDispatcher("/form.jsp").forward(request, response);//跳轉到form.jsp頁面
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form表單</title>
</head>

<body>
    <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" method="post">
        <%--使用隱藏域存儲生成的token--%>
        <%--
            <input type="hidden" name="token" value="<%=session.getAttribute("token") %>">
        --%>
        <%--使用EL表達式取出存儲在session中的token--%>
        <input type="hidden" name="token" value="${token}"/> 
        用戶名:<input type="text" name="username"> 
        <input type="submit" value="提交">
    </form>
</body>
</html>

3.DoFormServlet處理表單提交

package xdp.gacl.session;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DoFormServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {

            boolean b = isRepeatSubmit(request);//判斷用戶是否是重復提交
            if(b==true){
                System.out.println("請不要重復提交");
                return;
            }
            request.getSession().removeAttribute("token");//移除session中的token
            System.out.println("處理用戶提交請求?。?);
        }
        
        /**
         * 判斷客戶端提交上來的令牌和服務器端生成的令牌是否一致
         * @param request
         * @return 
         *         true 用戶重復提交了表單 
         *         false 用戶沒有重復提交表單
         */
        private boolean isRepeatSubmit(HttpServletRequest request) {
            String client_token = request.getParameter("token");
            //1、如果用戶提交的表單數據中沒有token,則用戶是重復提交了表單
            if(client_token==null){
                return true;
            }
            //取出存儲在Session中的token
            String server_token = (String) request.getSession().getAttribute("token");
            //2、如果當前用戶的Session中不存在Token(令牌),則用戶是重復提交了表單
            if(server_token==null){
                return true;
            }
            //3、存儲在Session中的Token(令牌)與表單提交的Token(令牌)不同,則用戶是重復提交了表單
            if(!client_token.equals(server_token)){
                return true;
            }
            
            return false;
        }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

生成Token的工具類TokenProccessor

package xdp.gacl.session;

import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Random;
import sun.misc.BASE64Encoder;

public class TokenProccessor {

    /*
     *單例設計模式(保證類的對象在內存中只有一個)
     *1、把類的構造函數私有
     *2、自己創建一個類的對象
     *3、對外提供一個公共的方法,返回類的對象
     */
    private TokenProccessor(){}
    
    private static final TokenProccessor instance = new TokenProccessor();
    
    /**
     * 返回類的對象
     * @return
     */
    public static TokenProccessor getInstance(){
        return instance;
    }
    
    /**
     * 生成Token
     * Token:Nv6RRuGEVvmGjB+jimI/gw==
     * @return
     */
    public String makeToken(){  //checkException
        //  7346734837483  834u938493493849384  43434384
        String token = (System.currentTimeMillis() + new Random().nextInt(999999999)) + "";
        //數據指紋   128位長   16個字節  md5
        try {
            MessageDigest md = MessageDigest.getInstance("md5");
            byte md5[] =  md.digest(token.getBytes());
            //base64編碼--任意二進制編碼明文字符   adfsdfsdfsf
            BASE64Encoder encoder = new BASE64Encoder();
            return encoder.encode(md5);
        } catch (NoSuchAlgorithmException e) {
            throw new RuntimeException(e);
        }
    }
}

首先訪問FormServlet,在FormServlet中生成Token之后再重定向到form.jsp頁面,這次是在服務器端處理表單重復提交的從運行效果中可以看到,通過這種方式處理表單重復提交,可以解決上述的場景二和場景三中出現的表單重復提交問題。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,363評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,497評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,305評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,962評論 1 311
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,727評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,193評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,257評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,411評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,945評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,777評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,978評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,519評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,216評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,642評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,878評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,657評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,960評論 2 373

推薦閱讀更多精彩內容

  • 解決思路: 表單不能由HTML頁面輸出,須有程序生成輸出 程序輸出表單時需在表單里添加一個隨機數打給瀏覽器 用戶提...
    wswenyue閱讀 1,943評論 0 1
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,782評論 18 139
  • 22年12月更新:個人網站關停,如果仍舊對舊教程有興趣參考 Github 的markdown內容[https://...
    tangyefei閱讀 35,200評論 22 257
  • 具體的做法:在服務器端生成一個唯一的隨機標識號,專業術語稱為Token(令牌),同時在當前用戶的Session域中...
    大蝦咪閱讀 236評論 0 0
  • 從自我意識強烈萌生那個人生階段開始,就對自己的喜歡的人或物持有潔癖性的態度。我相信,第一眼就喜歡的東西,絕不僅僅因...
    youth藍小菲閱讀 335評論 0 2