基于ajax实现验证码功能

本文实例为大家分享了ajax实现验证码功能的具体代码，供大家参考，具体内容如下

首先创建一个验证码：

<%@ page contentType="image/jpeg; charset=utf-8" 
  language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" 
  pageEncoding="UTF-8"%> 
 
<%! 
  //获取随机颜色 
  public Color getColor(){ 
   Random random = new Random(); 
   //使用rgb()随机产生颜色 
   int r = random.nextInt(256); 
   int g = random.nextInt(256); 
   int b = random.nextInt(256); 
    
   return new Color(r,g,b); 
  } 
   
  //获取随机数字 产生一个4位数 
  public String getNum(){ 
   String str = ""; 
   Random random = new Random(); 
   for(int i = 0;i < 4;i++){ 
    str += random.nextInt(10); //0-9 
   } 
   return str; 
  } 
%> 
 
<% 
  /* 清除缓存 */ 
  response.setHeader("pragma", "mo-cache"); 
  response.setHeader("cache-control", "no-cache"); 
  response.setDateHeader("expires", 0); 
  //产生矩形框 
  BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB); 
  //获取画笔工具 
  Graphics g = image.getGraphics(); 
  //设置矩形框的颜色 
  g.setColor(new Color(200,200,200)); 
  //设置坐标和宽高 
  g.fillRect(0, 0, 80, 30); 
     
  //随机产生干扰线 
  for(int i = 0;i < 30;i++){ 
   Random random = new Random(); 
   int x = random.nextInt(80); 
   int y = random.nextInt(30); 
   int x1 = random.nextInt(x + 10); 
   int y1 = random.nextInt(y + 10); 
   //设置随机颜色 
   g.setColor(getColor()); 
   //画出来 
   g.drawLine(x, y, x1, y1); 
  } 
   
  //字的颜色和数字 
  g.setFont(new Font("Microsoft YaHei",Font.BOLD,16)); 
  g.setColor(Color.BLACK); 
  //获取随机数字 
  String checkNum = getNum(); 
   
  //给字拼接空格 
  StringBuffer sb = new StringBuffer(); 
  for(int i = 0;i < checkNum.length();i++){ 
   sb.append(checkNum.charAt(i) + " "); 
  } 
  //画出数字 
  g.drawString(sb.toString(), 15, 20); 
  //存入session域中 
  session.setAttribute("CHECKNUM", checkNum); //例如1010 
  //将图像以jpeg的形式通过字节流输出 
  ImageIO.write(image, "jpeg", response.getOutputStream()); 
  //清除缓存 
  out.clear(); 
  //放入body中 
  out = pageContext.pushBody(); 
%> 

将验证码压缩成图片，在checkcode.jsp中引用,并在该页面中利用ajax向服务器发送数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
 
 
 
  
  
  
  
  
  
  
   
  
  
  
  
 
  
  
 
   
 
    
验证码
 
    
 
    
 
    
√√√
 
   
 
  
 
  
  
 
  
 
 
  
 

然后编写服务端,接收输入的信息，判断是否与验证码相互匹配,将对应的图片的路径以输出流的方式输出

public class CheckcodeServlet extends HttpServlet { 
 @Override 
 protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
   throws ServletException, IOException { 
  req.setCharacterEncoding("utf-8"); 
  resp.setContentType("text/html;charset=utf-8"); 
  //图片路径 
  String tip = "images/MsgError.gif"; 
   
  String checkcode = req.getParameter("checkcode"); 
  //测试 
  System.out.println(checkcode); 
  //获取session域中的数字 
  String checkcodeService = (String) req.getSession().getAttribute("CHECKNUM"); 
  //判断 
  if (checkcode.equals(checkcodeService)) { 
   tip = "images/MsgSent.gif"; 
  } 
  //输出路径 
  PrintWriter pw = resp.getWriter(); 
  pw.write(tip); 
  pw.flush(); 
  pw.close(); 
 } 
} 

当输入第4个数字的时候就会出现提示
运行结果:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。