在java后台中生成验证码的ImageIO传到前端页面显示，同时把验证码的value值传入session 中用于与用户输入的验证码进行匹配，在用户验证中使用ajax技术，在不刷新页面的同时进行验证码验证。
程序结构图：
VerifyCodeUtils程序主要内容为通过java生成验证码的图片，以及验证码的value值，程序如下：
package utils; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.util.HashMap; import java.util.Map; import java.util.Random; public class VerifyCodeUtils { private static BufferedImage image = null; private static Random random = new Random(); //在自己定义的一些数中，生成4位随机数 public static String getVerifyCode() { String str = ""; char[] code = new char[]{'A','B','C','D','E','F','G','H','I','J','K','L','M','N','P','Q','R','S','T','U', 'V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','m','n','p','q','r','s','t', 'u','v','w','x','y','z','2','3','4','5','6','7','8','9'}; Random random = new Random(); for(int i = 0; i < 4; i++) { str += String.valueOf(code[random.nextInt(code.length)]); } return str; } //生成验证码图像 public static Map getVerifyCode(int width, int heigth) { VerifyCodeUtils.image = new BufferedImage(width, heigth, BufferedImage.TYPE_INT_RGB); Graphics2D g = (Graphics2D) VerifyCodeUtils.image.getGraphics(); String verifyCode = getVerifyCode(); Map map = new HashMap(); map.put("verifyCode", verifyCode); //将图像填充为白色 g.setColor(Color.WHITE); g.fillRect(0, 0, width, heigth); //设置字体 g.setFont(new Font("宋体", Font.BOLD + Font.ITALIC, heigth-10)); //画边框。 g.setColor(VerifyCodeUtils.getColor()); g.drawRect(0, 0, width, heigth); //随机产生干扰线，使图象中的认证码不易被其它程序探测到 g.setColor(Color.BLACK); for (int i = 0; i < 50; i++) { int x = VerifyCodeUtils.random.nextInt(width); int y = VerifyCodeUtils.random.nextInt(heigth); int xl = VerifyCodeUtils.random.nextInt(5); int yl = VerifyCodeUtils.random.nextInt(5); g.setColor(getColor()); g.drawLine(x, y, x + xl, y + yl); } char c; for(int i = 0; i < 4; i++) { c = verifyCode.charAt(i); g.drawString(c+"", i*20+40, heigth-10); } map.put("image", VerifyCodeUtils.image); return map; } //随机化颜色 public static Color getColor() { int red = 0, green = 0, blue = 0; // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。 red = VerifyCodeUtils.random.nextInt(255); green = VerifyCodeUtils.random.nextInt(255); blue = VerifyCodeUtils.random.nextInt(255); return new Color(red,green,blue); } }
VerifyCodeServlet把VerifyCodeUtils生成的验证码图片通过io流传入前端显示，代码如下：
package Servlet; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Map; import javax.imageio.ImageIO; 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 utils.VerifyCodeUtils; /** * Servlet implementation class VerifyCodeServlet */ @WebServlet("https://www.jb51.net/") public class VerifyCodeServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public VerifyCodeServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setHeader("Expires", "-1"); response.setHeader("Cache-Control", "no-cache"); response.setHeader("Pragma", "no-cache"); response.setHeader("Content-type", "image/jpeg"); Map map = VerifyCodeUtils.getVerifyCode(223, 50); //把verifyCode的数值传入session中用于验证用户输入的验证码是否正确 request.getSession().setAttribute("verifyCode", map.get("verifyCode").toString().toUpperCase()); //通过IO流传入前端显示 ImageIO.write((BufferedImage) map.get("image"), "jpg", response.getOutputStream()); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
页面jsp代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <base href="https://www.jb51.net/${pageContext.request.contextPath}"> <title>验证码测试界面</title> <style> div{float:left;} input{width:223px;height:31px;margin-right:20px;} img{width:223px;height:35px;} p{margin:10px;} </style> </head> <body> <script src="https://www.jb51.net/${pageContext.request.contextPath}/JS/demo.js"></script> <div> <input type="text" placeholder="验证码" onblur="check_verifyCode()"> </div> <div> <img src="https://www.jb51.net/${pageContext.request.contextPath}/servlet/VerifyCodeServlet"/> </div> <div> <p id = "tip"></p> </div> </body> </html>
js 实现ajax代码如下：