ajax 实现验证码

来源：互联网发布：女尊小说软件编辑：程序博客网时间：2024/05/01 03:15

1、编辑一个带form表单的文件，index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>验证码</title></head> <body><form name="form1" method="post" > 验证码：<input type="text" name="number"> <img src="random.jsp" mce_src="random.jsp" id="random"align="" valign="absmiddle" hspace="5"> <a href="javascript:show(document.getElementById('random'))" mce_href="javascript:show(document.getElementById('random'))" >验证码看不清</a><br/> <input type="submit" name="ok" value="确定"> </form> </body></html>

2、编辑一个可以随机产生图片的页面，random.jsp

<%@ page autoFlush="false" pageEncoding="utf-8" import="java.util.*,java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %><%//set Chinese Char //Cody by JarryLi@gmail.com;//homepage:jiarry.126.comrequest.setCharacterEncoding("GBK");response.setCharacterEncoding("GBK");response.setContentType("text/html; charset=GBK");%><%String chose="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";char display[]={'0',' ','0',' ','0',' ','0'},ran[]={'0','0','0','0'},temp;Random rand=new Random();for(int i=0;i<4;i++){ temp=chose.charAt(rand.nextInt(chose.length())); display[i*2]=temp; ran[i]=temp; } String random=String.valueOf(display);session.setAttribute("random",String.valueOf(ran)); %><% out.clear(); response.setContentType("image/jpeg"); response.addHeader("pragma","NO-cache"); response.addHeader("Cache-Control","no-cache"); response.addDateHeader("Expries",0); int width=80, height=30; BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics(); //以下填充背景颜色 g.setColor(Color.GREEN); g.fillRect(0, 0, width, height); //设置字体颜色 g.setColor(Color.RED); Font font=new Font("Arial",Font.PLAIN,20); g.setFont(font); //g.drawString(random,5,14); g.drawString(random,5,20); g.dispose(); ServletOutputStream outStream = response.getOutputStream(); JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(outStream); encoder.encode(image); outStream.close(); %>

3、编辑index.jsp,调用xmlHttprequest

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>验证码</title><mce:script type="text/javascript" ></mce:script> </head> <body> <% String random=(String)session.getAttribute("random"); %> <form name="form1" method="post" action="compare.jsp" onsubmit="return chk()"> 验证码：<input type="text" name="number"> <img src="random.jsp" mce_src="random.jsp" id="random"align="" valign="absmiddle" hspace="5"> <a href="javascript:show(document.getElementById('random'))" mce_href="javascript:show(document.getElementById('random'))" >验证码看不清</a><br/> <input type="submit" name="ok" value="确定"> </form> </body></html>

显示结果：