获取验证码不同步问题，附代码。救救孩子吧
原问题连接 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>密 码</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>1
收起
正在回答
2回答
同学你好。
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中，使用如下语句获取即可：
// 获得session中保存的验证码的信息 String code1 = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
祝学习愉快~
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星