1. 自行编写Servlet,用于配置得到生成验证码图片访问地址:
以上为自定义生成验证码图片的Servlet(内部将验证码加入到session中,key值为” validationCode”,类型为String类型)。内部有生成验证码的位数控制和验证码图片大小等设置方法。下面在web.xml中配置Servlet即可通过URL地址访问得到生成的验证码图片(注:也可以通过注解的方式配置ServletURL访问路径)。
2. 下面说明以上Servlet在web.xml中的配置方法:
<servlet>
<servlet-name>validationCode</servlet-name>
<servlet-class>com.ninemax.cul.servlet.ValidationCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>validationCode</servlet-name>
<url-pattern>/validationCodeServlet.png</url-pattern>
</servlet-mapping>
3、通过以上配置即可通过http://hostname:[port]/webappName/ validationCodeServlet.png
地址访问新生成图片。
4、下面介绍在页面中刷新验证码图片的方法
实际上,每访问一次上面的地址,即可生成新的验证码图片(session中值同步刷新)。
在JS中刷新验证码图片的方法为在http://hostname:[port]/webappName/validationCodeServlet.png地址后面加上”?+随机数“的方式刷新页面。
比如说页面中<img id=’validationCode’ src=’ http://hostname:[port]/webappName/validationCodeServlet.png’/>
在函数中通过以下js代码即可完成刷新图片的操作:
Document.getElementById(‘validationCode’).src=’http://hostname:[port]/webappName/ validationCodeServlet.png?randomNum’
按照这个思路即可完成刷新图片的操作;
5、下面给出一个刷新验证码图片的Demo:
页面中的元素:
<inputname="validateNumber" type="text"/>
<imgid='validationCode' alt="点击图片刷新"src="<%=basePath%>validationCodeServlet.png" >
<ahref='#' οnclick='refreshCode()'>换一张</a>
对应的JS方法为:
function refreshCode(){
var imgObj = document.getElementById("validationCode");
var index = imgObj.src.indexOf("?");
if(index != -1) {
varurl =imgObj.src.substring(0,index + 1);
imgObj.src = url + Math.random();
} else{
imgObj.src =imgObj.src + "?" + Math.random();
}
}