思路：页面加载时执行fnGetcode()方法，获取验证码所有信息；点击“点击图片更换” 再次执行fnGetcode()方法；
1）：<body onload="fnGetcode();">
<label>
验证码：
<input id="showco" type="hidden" value=""/>
<input type="text" id="code" name="code" class="input-text" id="yzmText"
onfocus="var offset = $(this).offset();$('#yzm').css({'left': +offset.left-8, 'top': +offset.top-$('#yzm').height()});$('#yzm').show();$('#yzmText').data('hide', 1)"
/>
</label>
<div id="yzm" class="yzm">
<img id='checkcode' onclick='fnGetcode();'
src=''>
<br />
<a href="JavaScript:fnGetcode();">
点击图片更换
</a>
</div>
<script type="text/javascript">
//获得验证码
function fnGetcode(){
$.post("<%=basePath%>getCode.jsp", null, function(data) {
var data = eval('(' + data + ')');
//$.messager.alert("验证码", data.code);
document.getElementById("checkcode").src="yanzhengma.jsp?r="+data.code;
$("#showco").val(data.code);
});
}
</script>
</body>
2）：yanzhengma.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@page import="java.awt.image.BufferedImage"%> <%@page import="java.awt.Graphics"%> <%@page import="java.awt.Color"%> <%@page import="java.awt.Font"%> <%@page import="com.sun.image.codec.jpeg.JPEGImageEncoder"%> <%@page import="com.sun.image.codec.jpeg.JPEGCodec"%> <%@page import="com.db.DBquery"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>验证码</title> </head> <body> <h3>在jsp页面生成验证码</h3> <hr/> <% out.clear(); out = pageContext.pushBody();
String code=request.getParameter("r"); int width=400, height=33;//图片的大小（宽和高） //构架画布，第一个参数表示画布的宽，第二个参数表示画布的高，第三个参数的含义有待确定 BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics();//实例化画图对象 //以下设置背景色 g.setColor(Color.pink); /*下面两行是定义字体和将字体设置到画布中 第一个参数表示字体，第二个参数表示文本的样式（如：粗体，斜体等），第三个参数表示文字的大小*/ Font DeFont=new Font("楷字", Font.PLAIN, 35); g.setFont(DeFont); //将已经设置好的背景颜色填充到指定的画布区域 g.fillRect(0,0, width, height); //置字体色 g.setColor(Color.blue); //在画布上输出文字信息，第一个参数表示要显示的文字，第二和第三个参数表示起始点的X、Y坐标 g.drawString(code,90,30); g.dispose(); ServletOutputStream outStream = response.getOutputStream(); JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(outStream); encoder.encode(image); outStream.close(); %> </body> </html>
3）：getCode.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@page import="java.awt.image.BufferedImage"%> <%@page import="java.awt.Graphics"%> <%@page import="java.awt.Color"%> <%@page import="java.awt.Font"%> <%@page import="com.sun.image.codec.jpeg.JPEGImageEncoder"%> <%@page import="com.sun.image.codec.jpeg.JPEGCodec"%> <%@page import="com.db.DBquery"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
//获取四位数字 String code=DBquery.generateWord(); //System.out.println(code); // 将认证码存入SESSION session=request.getSession(); session.setAttribute("sysValidation",code); //System.out.println("sesscode:"+session.getAttribute("sysValidation")); String returnString="{\"code\":'"+code+"'}"; response.getWriter().write(returnString); %>