web.xml文件配置如下：
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
<!-- 登录校验码组件配置 -->
<context-param>
<param-name>ImageServletMapping</param-name>
<param-value>/gen-image</param-value>
</context-param>
<servlet>
<servlet-name>ImageServlet</servlet-name>
<servlet-class>org.apache.taglibs.image.ImageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ImageServlet</servlet-name>
<url-pattern>/gen-image/*</url-pattern>
</servlet-mapping>
有配置可知采用了spring mvc。
login.jsp文件代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery_1_7_2_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#change").click(function(){
<%-- document.getElementById("iframe1").src="<%=basePath%>user/code.html"; --%>
$("#iframe1").attr("src","<%=basePath%>user/code.html");
});
});
</script>
</head>
<body>
<h2>用户登录</h2>
<form action="<%=basePath%>user/login.html" method="post">
用户名：<input type="text" name="userName" id="userName" /><br /> 密码：<input
type="password" name="userPassword" id="userPassword" /><br /> <input
type="text" name="verifyCode" id="verifyCode" maxlength="4"
onkeyup="if(event.keyCode==13) document.forms[0].submit();" />
<span
id="vCode" style="margin-left: 6px;"></span>
<iframe id="iframe1" src="<%=basePath%>user/code.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" width="55" height="20"></iframe>
<label id="change" style="cursor:hand;"><font size="-1">换一换</font></label> <br />
<font color="red">${msg }</font> <input type="submit" value="登录" /> <input
type="reset" value="重置" />
</form>
</body>
</html>
其中，user/code.html是访问verifyCode.jsp文件。
verifyCode.jsp文件代码如下：
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib uri="http://jakarta.apache.org/taglibs/image-1.0" prefix="img" %>
<%
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<%
int num = (int)Math.round(Math.random() * 8999);
int y1 = (int)Math.round(Math.random() * 50) + 50;
int y2 = (int)Math.round(Math.random() * 50) + 50;
int y3 = (int)Math.round(Math.random() * 50) + 50;
int y4 = (int)Math.round(Math.random() * 50) + 50;
String sY1=String.valueOf(y1)+"%";
String sY2=String.valueOf(y2)+"%";
String sY3=String.valueOf(y3)+"%";
String sY4=String.valueOf(y4)+"%";
String textColors[] = {"0x993399", "0x660033", "0xcc3366", "0x990099", "0x336633", "0x003399", "0x996600", "0x990066", "0x333333", "0xFF9900", "0xFF6600", "0x669933", "0x0066CC"};
String color1 = textColors[(int)Math.round(Math.random()*12)];
String color2 = textColors[(int)Math.round(Math.random()*12)];
String color3 = textColors[(int)Math.round(Math.random()*12)];
String color4 = textColors[(int)Math.round(Math.random()*12)];
String sRand = "" + (1000 + num);
session.setAttribute("verifyCode",sRand);
%>
<img:image src="/images/verifyCode_b.jpg" refresh="true">
<img:text text="<%=sRand.substring(0,1)%>" x="14%" y="<%=sY1 %>" font="Arial" bold="true" size="12" color="<%=color1%>" />
<img:text text="<%=sRand.substring(1,2)%>" x="34%" y="<%=sY2 %>" font="TimesNewRoman" bold="true" size="12" color="<%=color2%>" />
<img:text text="<%=sRand.substring(2,3)%>" x="54%" y="<%=sY3 %>" font="Arial" bold="true" size="12" color="<%=color3%>" />
<img:text text="<%=sRand.substring(3,4)%>" x="74%" y="<%=sY4 %>" font="TimesNewRoman" bold="true" size="12" color="<%=color4%>" />
</img:image>
注意需要导入taglibs-image.jar包
使用到的verifycode_b.jpg 如下：
运行效果如下：
在ie中换一换存在问题，在火狐中正常
原文：http://blog.csdn.net/moneyzhong/article/details/23363417
