编写image.jsp
,由该jsp页面产生验证码图片,如下所示:
<%@ page import="java.awt.*" %>
<%@ page import="java.util.Random" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="javax.imageio.ImageIO" %>
<%@ page contentType="image/jpeg" language="java" %>
<%!
//获取随机颜色
public Color getColor() {
Random random = new Random();
int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
return new Color(r, g, b);
}
//获取随机字符串 这里仅仅是获取4位随机整数
public String getString() {
Random random = new Random();
return String.valueOf((random.nextInt(9000) + 1000));
}
%>
<%
//禁止缓存
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0"); //缓存0秒后过期
//绘制验证码
BufferedImage image = new BufferedImage(80, 30, BufferedImage.TYPE_INT_RGB);
//获得画笔
Graphics2D g2d = (Graphics2D) image.getGraphics();
//填充背景
g2d.setFont(new Font("seif", Font.BOLD, 20));
g2d.fillRect(0, 0, 80, 30);
//绘制随机线条
Random random = new Random();
for (int i = 0; i < 60; i++) {
//起始坐标
int b_x = random.nextInt(80);
int b_y = random.nextInt(30);
//终点坐标
int e_x = random.nextInt(b_x + 20);
int e_y = random.nextInt(b_y + 20);
//设置画笔颜色
g2d.setColor(getColor());
//绘制线条
g2d.drawLine(b_x, b_y, e_x, e_y);
}
String checkCode = getString();
StringBuffer sb = new StringBuffer();
for (int i = 0; i < checkCode.length(); i++) {
sb.append(checkCode.charAt(i) + " "); //拼接验证码的每一位,空格分开;
}
g2d.setColor(Color.black);
g2d.drawString(sb.toString(), 13, 25); //绘制验证码
//保存验证码 到 session中
session.setAttribute("checkCode", checkCode);
//产生真实图片
ImageIO.write(image, "jpeg", response.getOutputStream());
//关闭
out.clear();
out = pageContext.pushBody();
%>
在前端页面通过<img />
标签的src
属性请求该jsp页面(本质上是请求jsp编译后的servlet
,即
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>验证码Demo</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//点击验证码刷新
function reloadImg() {
// 强制刷新 ,如果不携带参数,则服务器会认为请求过相同文件不予更新
$("img").attr("src", "image.jsp?t=" + (new Date().getTime()));
}
//验证
function checkCode() {
let checkCode = $("#checkcodeId").val();
if (checkCode.length != 0) {
$.ajax({
url: "CheckCodeServlet",
type: "post",
data: "checkCode=" + checkCode,
dataType: "text",
success: function (data, statusCode) {
if (data == "error") {
$("#tip").text("验证失败!").addClass("warnning");
}
if (data == "success") {
$("#tip").text("验证通过!").addClass("success");
}
},
error: function () {
alert("服务器异常!");
}
});
}
}
</script>
<style>
.warnning {
color: red;
}
.success {
color: green;
}
</style>
</head>
<body>
验证码:<input type="text" name="checkcode" id="checkcodeId" onblur="checkCode()" size="4"/>
<a href="javascript:reloadImg()"><img src="image.jsp" alt="验证码"></a><br/>
<span id="tip"></span>
</body>
</html>
要注意的是:要想实现点击图片刷新,在重新绑定img的src属性时需要携带一个参数(随机数字或者时间都可以),该参数不影响请求。
$("img").attr("src", "image.jsp?t=" + (new Date().getTime()));
接着,客户端提交验证码到相应的Servlet去校验
比如这里是CheckCodeServlet.java
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setHeader("Content-Type","text/html;charset=UTF-8");
//获取客户端提交的验证码
String checkCode = request.getParameter("checkCode");
HttpSession session =request.getSession();
PrintWriter writer = response.getWriter();
//校验是否和保存在session中的验证码一致
if (checkCode.equals(session.getAttribute("checkCode"))) {
writer.write("success");
} else {
writer.write("error");
}
//从session中移除该验证码
session.removeAttribute("checkCode");
writer.flush();
writer.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
最终效果 如下图所示: