【学习笔记】Web开发中防止页面刷新后表单重复提交，表单Token设置示例

在进行Web页面开发时，通常会使用表单提交数据得到服务器反馈，但是也通常会碰到这样一种情况，表单提交后，反馈的数据也拿到了，一会后因为某些原因需要刷新当前网页，但是又不想再一次提交表单，也就是说，刷新页面时，不再一次提交表单，只能用户自己点提交按钮后才能提交表单，那么怎么实现了，无论GET还是POST都会缓存表单信息，那么，我们可以增加一个表单token来实现这一需求。

1. 前端实现如下

<form action="/Search" method="GET" id="search-form" onsubmit="return generateToken()">
    <input type="text" id="keyword" name="keyword"/>
    <input type="hidden" name="token" id="token" value=""/>
    <input type="submit"/>
</form>

如上所示，增加了一个hidden域存储token参数，而点击提交表单后，则由generateToken方法产生一个动态随机的token同时提交进服务器，下面我们来看generateToken方法的实现

function generateToken(){
    var date=new Date();
    var seed=""+date.getTime()+date.getYear()+date.getMonth()+date.getDate();
    var token="";
    var temp;
    for(var i=0,n=seed.length;i<n;i++){
        temp=parseInt(seed.substring(i,i+1));
        token+=String.fromCharCode(65 + temp);
    }
    $(".nav #token").val(token);
    if($(".nav #token").val()==token){
        return true;
    }
    return false;
}

js使用了当前时间+年+月+日为基数种子，然后分别转为对应的字母，当然也可以直接使用数字，生成token后，赋值给hidden域，同时判断一次hidden域的值是否和生成的token一致(看似多余，实则防止赋值失败的情况)。

2. 后台服务器实现（Java）

@RequestMapping("/Search")
    public ModelAndView searchView(String keyword,Page page,String token,HttpSession session){
        ModelAndView model=new ModelAndView("Search");
        if(token==null){
            return model;
        }
        String lastToken=(String) session.getAttribute("searchFormToken");
        if(lastToken==null||!lastToken.equals(token)){
            searchByKeyword(keyword,page,session);
            session.setAttribute("searchFormToken", token);
        }
        return model;
    }

    @SuppressWarnings("unchecked")
    @RequestMapping("/Search/Keyword")
    @ResponseBody
    public Map<String,Object> searchByKeyword(String keyword,Page page,HttpSession session){
        //如果没有关键词，则默认搜索全部
        if(keyword==null){
            keyword="";
        }
        /**
         * 设置当前请求页码以及单页最大显示数，防止前段错误操作
         */
        page.setCurrent(page.getCurrent()==0?1:page.getCurrent());
        page.setMax(page.getMax()==0?15:page.getMax());
        session.setAttribute("searchKeyword", keyword);
        Map<String,Object> result=videoService.listSimpleInfoByKeyword(keyword, page);
        session.setAttribute("searchResult", result);
        session.setAttribute("searchPage", page);
        System.out.println(session.getAttribute("searchKeyword"));
        return result;
    }

提交表单后，服务器返回搜索页面，提交判断当前session中存储的search token是否与表单提交的token一致，如果一致，表示这个表单已经处理过了，不再处理此表单，如果不一致，则处理此表单并存储表单token，防止之后的重复提交。（由于用的是近期使用的项目代码，所以细节不用纠结，只需要在意searchView方法中处理token的步骤即可）。

结语

防止表单提交的技术有很多，包括前端禁止提交，以及判断URL等操作，本文只是简述了其中的token设置方法，是较为简单的实现，除此之外，现在的很多框架也包含了防止重复表单的实现。
防止表单重复提交的好处有很多，重复提交注册，提交登录等都需要检测重复提交，所以掌握这些方法是Web开发中必备的技巧。
（博主学疏才浅，技术钻研不精，望勿打脸，在此谢过各位！）