毕业生网站建设方案书,叮当快药网上商城,网页设计图片旋转,上海网站jianshe1. 表单重复提交原因
当用户提交完请求#xff0c;浏览器会记录最后一次请求的全部信息。用户按下功能键F5#xff0c;就会发起浏览器记录的最后一次请求。如果最后一次请求为添加操作#xff0c;那么此时刷新按钮就会再次提交数据#xff0c;造成表单重复提交。
2. 表单…1. 表单重复提交原因
当用户提交完请求浏览器会记录最后一次请求的全部信息。用户按下功能键F5就会发起浏览器记录的最后一次请求。如果最后一次请求为添加操作那么此时刷新按钮就会再次提交数据造成表单重复提交。
2. 表单重复提交的三种常见情况
提交完表单。服务器使用请求转来进行页面跳转。这个时候用户按下功能键F5就会发起最后一次的请求。造成表单重复提交问题。解决方法使用重定向来进行跳转用户正常提交服务器但是由于网络延迟等原因迟迟未收到服务器的响应这个时候用户以为提交失败就会着急然后多点了几次提交操作也会造成表单重复提交。解决方法使用验证码用户正常提交服务器。服务器也没有延迟但是提交完成后用户回退浏览器。重新提交。也会造成表单重复提交。解决方法使用验证码
3. 验证码原理
用户第一次通过浏览器访问服务器的表单页面时候会生成一个随机的验证码并保存在session中之后为验证码生成一个验证码图片回显在表单页面中用户在访问到的页面中输入用户信息和验证码并发起请求在后端程序中先回去session中的验证码并删除Session中的验证码因为验证码只用一次之后获取表单项信息在比较表单项的验证码和获取到的Session验证码是否一致。如果相同则允许操作不相等则阻止操作。 第一次发起请求表单项的验证码和获取到的Session验证码相等都为abcde所以允许登录再次发起一个新的请求由于Session的验证码已经删除了为null表单项的验证码还为abcde不相等所以不允许登录。 4. 谷歌验证码的使用步骤
说明
验证码这种需求是很常见的业务所以一般也不需要自己写代码可以使用第三方封装好的验证码比如谷歌kaptcha图片验证码。以下步骤是在学习javaWeb时候的步骤真正项目中使用的是SpringBoot整合后的步骤。
谷歌验证码 kaptcha 使用步骤如下
导入谷歌验证码的 jar 包 kaptcha-2.3.2.jar在 web.xml 中去配置用于生成验证码的 Servlet 程序
servletservlet-nameKaptchaServlet/servlet-nameservlet-classcom.google.code.kaptcha.servlet.KaptchaServlet/servlet-class
/servlet
servlet-mappingservlet-nameKaptchaServlet/servlet-nameurl-pattern/kaptcha.jpg/url-pattern
/servlet-mapping在表单中使用 img 标签去显示验证码图片并使用它
form actionhttp://localhost:8080/tmp/registServlet methodget用户名input typetext nameusername br验证码input typetext stylewidth: 80px; namecodeimg srchttp://localhost:8080/tmp/kaptcha.jpg alt stylewidth: 100px; height: 28px; brinput typesubmit value登录
/form在服务器获取谷歌生成的验证码和客户端发送过来的验证码比较使用。
Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException,IOException {// 获取 Session 中的验证码String token (String) req.getSession().getAttribute(KAPTCHA_SESSION_KEY);// 删除 Session 中的验证码req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);String code req.getParameter(code);// 获取用户名String username req.getParameter(username);if (token ! null token.equalsIgnoreCase(code)) {System.out.println(保存到数据库 username);resp.sendRedirect(req.getContextPath() /ok.jsp);} else {System.out.println(请不要重复提交表单);}
}切换验证码
// 给验证码的图片绑定单击事件
$(#code_img).click(function () {// 在事件响应的 function 函数中有一个 this 对象。这个 this 对象是当前正在响应事件的 dom 对象// src 属性表示验证码 img 标签的 图片路径。它可读可写// alert(this.src);this.src ${basePath}kaptcha.jpg?d new Date();
});
