获取验证码不同步问题，附代码。救救孩子吧

原问题连接 https://class.imooc.com/course/qadetail/153194

xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--配置自动加载页面-->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
    <!--所有jsp页面自动加载common.jsp页面-->
    <jsp-config>
        <jsp-property-group>
            <url-pattern>*.jsp</url-pattern>
            <include-prelude>/WEB-INF/views/common.jsp</include-prelude>
        </jsp-property-group>
    </jsp-config>
    <!--kaptcha验证码配置-->
    <servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>80</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>35</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>4</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.noise.impl</param-name>
            <param-value>com.google.code.kaptcha.impl.NoNoise</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>30</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>blue</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.session.key</param-name>
            <param-value>kcode</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/kaptcha.jpg</url-pattern>
    </servlet-mapping>
</web-app>

common.jsp

<%
   //                协议类型://服务名称:端口地址/全局上下文(项目名称)
   String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 
                  request.getServerPort() + request.getContextPath();
   request.setAttribute("basePath", basePath);
%>

在WEB-INF目录外的index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
</head>
<body>
<meta http-equiv="refresh" content="0; url=<%=request.getContextPath()%>/index">
</body>
</html>

IndexServlet.java

package com.imooc.servlet;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
@WebServlet(name = "IndexServlet",urlPatterns = "/index")
public class IndexServlet extends HttpServlet {
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getRequestDispatcher("/WEB-INF/views/index.jsp").forward(request,response);
    }
}

在WEB-INF目录下的index.jsp页面（也就是老师给出的静态资源）。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录页面</title>
<style type="text/css">
   a 
   {
    text-decoration:none;
    font-size:12px;
    color:#288bc4;
   }
   a:hover 
   {
    text-decoration:underline;
   }
 
</style>
</head>
 
<body>
   <center>
      <h1>用户登录</h1>
      <p style="color: red">${msg}</p>
      <form action="<%=basePath%>/LoginServlet" method="post" onsubmit="return validateCode()">
         <table width="300px" cellspacing="0px" cellpadding="0px" border="1px">
            <tr>
               <td>用户名</td>
               <td colspan="2"><input type="text" id="username" name="username"  placeholder="用户名为3-12位字母数字或下划线组合"></td>
            </tr>
            <tr>
               <td>密&nbsp;码</td>
               <td  colspan="2"><input type="password" id="password" name="password" placeholder="长度为5-12位字母数字或下划线组合" ></td>
            </tr>
            <tr style="height:40px">
               <td>验证码</td>
               <td style="border-right-style:none;">
                  <input type="text" name="inputCode" id="inputCode" placeholder="请输入验证码" maxlength="4">
               </td>
               <td style="border-left-style:none;">
                  <div class="" id="checkCode" >
                     <form action="submit.action">
                        <img src="<%=basePath %>/kaptcha.jpg" id="kaptchaImg"/>
                     </form>
                  </div>
               </td>
            </tr>
            <tr>
               <td colspan="3" style="text-align:center">
                  <input type="submit" id="login" value="登录">
                  <input type="reset" value="取消">
               </td>
            </tr>
         </table>
      </form>
   </center>
   <script src="<%=request.getContextPath()%>/js/jquery-3.3.1.js" type="text/javascript"></script>
    <script>
        $(function () {
            $("#kaptchaImg").on("click", function () {
                $(this).attr("src", "<%=basePath%>/kaptcha.jpg?d=" + new Date().getTime());
            });
            $("#login").on("click",function(){
                //获取生成的验证码
            var kcode= '<%= request.getSession().getAttribute("kcode")%>';
               //获取用户输入的验证码
                var inputcode = $("#inputCode").val();
                alert("生成验证码："+kcode+"  用户输入验证码："+inputcode);
               <%--if(kcode != inputcode){--%>
               <%--     alert("验证码输入有误!");--%>
            <%--   window.navigator("<%=basePath%>/index");--%>
               <%--}--%>
            });
        })
    </script>
</body>
</html>

懒人13 2019-09-12

源自：项目：商品展示及购物车 5-3 作业题

收起

2回答

芝芝兰兰回答被采纳获得+3积分 2019-09-12 18:19:31

同学你好。

1、一般而言我们都不会在前台去做验证码的校验，而是将它挪到后台，就是因为Kaptcha的验证码生成是写好的Servlet，我们不能修改。而页面刷新时我们才能通过这个KAPTCHA_SESSION_KEY获取这个验证码。又因为页面一刷新就会重新生成验证码图片，所以都是会产生不一致的情况。所以非常不推荐使用前台验证，直接在LoginServlet中进行比较就可以了。

2、在前台校验非常复杂，如果同学坚持想实现，只能给同学提供个思路：需要专门写一个ajax，搭配一个Servlet，在图片被点击的时候触发。Servlet中专门获取session中KAPTCHA_SESSION_KEY对应的新值，异步地返回到前台。

祝学习愉快~

收起回答

芝芝兰兰 2019-09-12 16:37:34

同学你好。不能使用var kcode= '<%= request.getSession().getAttribute("kcode")%>';直接获取到验证码信息。使用kapcha实现的验证码，需要使用kapcha的KAPTCHA_SESSION_KEY来获取。

在提交按钮提交的LoginServlet中，使用如下语句获取即可：

1 2	`// 获得session中保存的验证码的信息` `String code1 = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);`

祝学习愉快~

收起回答

提问者懒人13 #1

老师是用这个常量后依旧是在LoginServlet中打印输出两个（用户输入和生成）值正常，而index.jsp页面中code1仍然为上一次的生成值

2019-09-12 17:12:25
提问者懒人13 #2

我将index.jsp页面接收生成验证码的script语句改为了 var kcode = <%=request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY)%>;

2019-09-12 17:18:08