一、这里直接给答案!获取的总是前一次,是因为异步的问题。
页面在加载的时候是先加载结构和文字,最后再加载图片的,而验证码的字符信息和图片都是在servlet中存进session的,获取验证码信息是前台获取的。这样的话,业务逻辑就变成先获取验证码信息,再加载图片。那么如果是第一次加载验证码,将获得空串,往后都是先获取前一次的验证码信息再加载新的验证码图片,同时修改session中的验证码字符信息。
二、下面进行验证
准备工作
1、在utils包里面写验证码信息
2、在Servlet中获取验证码图片,并以流的形式写出,同时将验证码字符信息写入session中
3、前台获取验证码图片,并且用EL表达式或者jsp获取存在session中的验证码字符信息。
这里给出前端页面代码(2-1-1)
<%--
Created by IntelliJ IDEA.
User: lenovo
Date: 2019/6/25
Time: 20:12
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
</head>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="domain.User" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>login</title>
</head>
<body>
function changeCoded(){
document.getElementById("img").src = "imgcode?t="+new Date().getTime();
<% request.setAttribute("msg","11111");%>
}
<form action="logintest" method="post">
<table>
<tr><td>用户名:</td><td><input type="text" name="username"></td></tr>
<tr><td>密码:</td><td><input type="password" name="password"></td></tr>
<tr><td>验证码:</td><td><input type="text" name="code"></td></tr>
<!-- 通过向服务器发送请求,从服务器获取验证码数据 -->
<%
%>
<tr><td></td><td><img id="img" src="imgcode" onclick="changeCode();"/>
<%= request.getAttribute("msg")==null?"":request.getAttribute("msg") %>
</span></td></tr>
<tr><td></td><td><input type="submit" value="登陆"></td></tr>
</table>
</form>
<div>
<%-- EL表达式}--%>
<%-- ${code}--%>
<%-- JS --%>
<%
if (session.getAttribute("code")!=null){
String code = (String) session.getAttribute("code");
%>
<%=code%>
<% }%>
</div>
</body>
</html>
(2-1-1)
2-1、浏览器加载页面
浏览器加载页面(图2-1-2),会发现验证码的图片已经生成,但是却没有显示验证码
(图2-1-2)
我们在再另写一个jsp代码(2-1-3)试着获取session中是否存有验证码信息,直接干脆利索的用EL表达式获取(这里应在第一加载页面前提前准备好2-1-3的jsp页面),
${code}
运行后发现就是图片中的验证码字符信息,“r0k4”,这已经证明在浏览器加载页面的时候session中存了session信息的,但是前面没获取到。
(图2-1-3)
在接下来的我们多次刷新验证码图片的页面发现验证码图片下面开始获取session中的验证码字符信息,但总是前一个,而在另一个只获取验证码字符信息的页面,却总能获取到当前验证码的信息
2-2 浏览器开发者模式
浏览器点F12,进入开发者模式,点击NetWork(图2-2-1),会发现刷新页面的整个动作下了,浏览器共响应两次请求,testwzh.jsp和imgcode,但是testwzh.jsp先执行,里面就有获取验证码字符信息的代码,而图片请求的执行再后,所以才会造成先获取session中的信息,后加载图片并修改session中的信息,获取到的总是比实际的晚一步
(图2-2-1)
解决方法
使用异步请求的Ajax技术。
之前在获取验证码图片的同时,已经将验证码字符信息存在了session中。使用Ajax在前端开启异步请求,请求到另一个servlet中,在这个servlet的输出流中加入验证码字符信息,此刻ajax请求获取的验证码信息和前端页面显示的就是相同的验证码字符
能力尚浅,有待进步,如有不足,不吝赐教!