| 网站数据HTML防止表单重复提交 |
| 来源：智睿 浏览：1586 次 发布时间：2019-09-21 10:40:23 |
| 在平时开发中，如果网速比较慢的情况下，用户提交表单后，发现服务器半天都没有响应，那么用户可能会以为是自己没有提交表单，就会再点击提交按钮重复提交表单，我们在开发中必须防止表单重复提交。 表单重复提交的的常见应用场景 场景一：在网络延迟的情况下让用户多次点击submit 按钮导致用户重复提交 场景二：表单提交后用户点击【刷新】按钮导致用户重复提交 场景三：用户提交表单后 ，点击浏览器的【后退】按钮回退到表单后再次提交 解决方式 利用JavaScript防止表表单重复提交 1.定义一个表单是否已经提交的标识，默认值为false，第一次点击提交后就将标识改为true，只有标识为false才可以提交，为true则阻止表单提交。 <form action="saveGoods.do" onsubmit="return submitFun()" method="post"> 商品名称:<input name="goodsName" type="text"><br/> 商品状态:<input name="goodsState" type="text"><br/> 商品类型:<input name="goodsType" type="text"><br/> 商品时间:<input name="goodsTime" type="date"><br/> <input type="submit" value="保存" /> </form> </body> <script> var bool =true;//设置全局变量 function submitFun() { if(bool){ bool=false; //第一次提交后 将bool 改为false 多次点击 提交一次 return true; }else{ return false; } } </script> ———————————————— 2.也可以在第一次点击提交按钮后将提交按钮改为不可用状态，就不可以再次点击该按钮了。局限性：使用JavaScript防止表单重复提交的做法只对上述提交到导致表单重复提交的三种场景中的【场景一】有效，而对于【场景二】和【场景三】是没有用，依然无法解决表单重复提交问 <form action="saveGoods.do" onsubmit="return submitFun2()" method="post"> //js 方法 function submitFun2() { $("#subBtn").prop("disabled","disabled"); return true; } ———————————————— 利用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 "保存成功"; } |
| 【刷新页面】【加入收藏】【打印此文】 【关闭窗口】 |
| 上一篇：智睿政府网站管理系统 V 9.9.8 全新政府网站系统,政务机关网站系统 下一篇：智睿软件承接网站安全修复，数据移植，网站备份，网站发布等业务 |
