侧边栏壁纸
博主头像
coydone博主等级

记录学习,分享生活的个人站点

  • 累计撰写 306 篇文章
  • 累计创建 51 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

验证码

coydone
2022-02-08 / 0 评论 / 0 点赞 / 300 阅读 / 2,002 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

表单重复提交

表单重复提交有三种常见的情况:

1、提交完表单,服务器使用请求转来进行页面跳转。这个时候,用户按下功能键 F5,就会发起最后一次请求。造成表单重复提交问题。解决方法:使用重定向来进行跳转。

2、用户正常提交服务器,但是由于网络延迟等原因,迟迟未收到服务器的响应。这个时候,用户以为提交失败, 就会着急,然后多点了几次提交操作,也会造成表单重复提交。

3、用户正常提交服务器,服务器也没有延迟,但是提交完成后,用户回退浏览器。重新提交,也会造成表单重复提交。

谷歌kaptcha图片验证码的使用

kaptcha详细参数

kaptcha 使用步骤

1、导入谷歌验证码的 jar 包 :kaptcha-2.3.2.jar

kaptcha-2.3.2.jar

2、在 web.xml 中去配置用于生成验证码的 Servlet 程序。

<servlet> 
    <servlet-name>KaptchaServlet</servlet-name> 
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> </servlet> 
<servlet-mapping>
    <servlet-name>KaptchaServlet</servlet-name>
    <url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping>

3、在表单中使用 img 标签去显示验证码图片并使用它。

<form action="http://localhost:8080/tmp/registServlet" method="post"> 
    用户名:<input type="text" name="username" > <br> 
    验证码:<input type="text" style="width: 80px;" name="code"> 
    <img src="http://localhost:8080/tmp/kaptcha.jpg" alt="" style="width: 100px; height: 28px;"> <br> 
    <input type="submit" value="登录"> 
</form>

4、在服务器获取谷歌生成的验证码和客户端发送过来的验证码比较使用。

@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("请不要重复提交表单"); 
    } 
}

5、切换验证码

// 给验证码的图片,绑定单击事件 
$("#code_img").click(function () { 
    // 在事件响应的 function 函数中有一个 this 对象。这个 this 对象,是当前正在响应事件的 dom 对象 
    // src 属性表示验证码 img 标签的 图片路径。它可读,可写 
    // alert(this.src); 
    this.src = "${basePath}kaptcha.jpg?d=" + new Date(); 
});
0

评论区