主要利用JSP+Servlet实现验证码生成
利用JQuery的ajax技术实现异步更换图片地址
BufferedImage实现验证码图片的生成
Servlet代码：
package Register; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; /** * Servlet implementation class GetCode */ public class GetCode extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public GetCode() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub BufferedImage img = new BufferedImage(100,30,BufferedImage.TYPE_INT_ARGB_PRE); Graphics g =img.getGraphics(); g.setColor(Color.gray); g.fillRect(0, 0, 80, 30); //画验证码背景 g.setColor(Color.white); g.setFont(new Font("宋体",Font.BOLD,30)); Random rand = new Random(); String code = ""; for(int i=0;i<4;i++){ //随机生成4位数字验证码 code += rand.nextInt(10); } g.drawString(code, 5, 25); ImageIO.write(img, "png", new File("d:/"+code+".png")); //生成验证码图片 response.getWriter().println(code); //验证码返回前台 } /** * @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"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var code; $.ajax({ //接收验证码 url:"GetCode", type:"POST", success:function(data, textStatus){ code =$.trim(data); $("img").attr({ src:"d:/"+code+".png"}); //改变验证码地址 }, error:function(XMLHttpRequest, textStatus, errorThrown){ } }); $("#img").click(function(){ //img标签绑定点击事件，点击更换图片 $.ajax({ url:"GetCode", type:"POST", success:function(data, textStatus){ code =$.trim(data); $("img").attr({ src:"d:/"+code+".png"}); }, error:function(XMLHttpRequest, textStatus, errorThrown){ } }); }); $("#code").blur(function(){ //判断输入的验证码和生成的是否一致 if($("#code").val()!=code){ $("#code").css("background-color","#F00"); } else{ $("#code").css("background-color","#0f0"); } }); }); </script> </head> <body> <form action="#"> 帐 号<input type="text" name="username" id="username" /><br><br> 密 码<input type="password" name="password" id="password" /><br><br> 验证码<input type="text" name="code" id="code" /><img id="img" src="#"><br><br> <input type="submit" value="注册"> </form> </body> </html>