面试问题——前端之表单提交

如何防止表单重复提交

解决方案

1. 通过JavaScript屏蔽提交按钮（不推荐）
   通过js代码，当用户点击提交按钮后，屏蔽提交按钮使用户无法点击提交按钮或点击无效，从而实现防止表单重复提交。缺点：js代码很容易被绕过。比如用户通过刷新页面方式，或使用postman等工具绕过前段页面仍能重复提交表单。因此不推荐此方法。
2. 利用session 防止表单重复提交
   首先：在服务器端生成一个唯一的随机标识号，专业术语称为Token(令牌 )，同时在当前用户的Session域中保护这个Token. 然后将Troken发送到客户端的form表单中，在form表单中使用隐藏域来存储这个Token,表单提交的时候连同这个Token一起提交到服务器端，然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致，如果不一致，那就是重复提交了，此时服务器可以不处理重复提交的表单，如果相同则处理表单提交，处理完成后清除当前用户的Session域中存储的标识号。

后台打开页面方式

@Autowired
    private HttpServletRequest request;
    @RequestMapping("toSave")
    public String  toSave(){
        String  Troken = UUID.randomUUID().toString(); //生成唯一的标识号
        request.getSession().setAttribute("goodsToken",Troken); //将troken 放在Session中
        return"save";
    }

页面

<input type="hidden" name="goodsToken" value="${goodsToken}">

后台保存方式

@RequestMapping(value = "saveGoods",produces="text/html;charset=UTF-8")
    @ResponseBody
    public String  saveGoods(String goodsToken,Goods goods){
        Object token = request.getSession().getAttribute("goodsToken");

        if(goodsToken ==null ||goodsToken.equals("")|| token==null){// 前台令牌为空 空串 或者取不到服务器中的令牌
         return"保存失败";
      }else if (!goodsToken.equals(token)) { // 如果前后台令牌不一致
            return"保存失败";
        }
        request.getSession().removeAttribute("goodsToken");
        try {
              Thread.sleep(3000);
          } catch (InterruptedException e) {
              e.printStackTrace();
          }
          goodsMapper.insert(goods);
          return "保存成功";

    }