一、這裏直接給答案!獲取的總是前一次,是因爲異步的問題。
頁面在加載的時候是先加載結構和文字,最後再加載圖片的,而驗證碼的字符信息和圖片都是在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" οnclick="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請求獲取的驗證碼信息和前端頁面顯示的就是相同的驗證碼字符
能力尚淺,有待進步,如有不足,不吝賜教!