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.com request.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" ><!-- function chk(){ var number=document.form1.number.value; if(number.length==0){ alert("请输入验证码!"); document.form1.number.focus(); return false; } else return true; } function show(o){ var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX!"); return false; } } } //xmlHttp.open("GET","random.jsp",true); //xmlHttp.send(null); var timenow = new Date().getTime(); o.src="random.jsp?d="+timenow; } // --></mce:script> </head> <body> <% String random=(String)session.getAttribute("random"); %> <form name="form1" method="post" action="compare.jsp" οnsubmit="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> 显示结果: