验证码在我们浏览器显示其实就是一张图片
1)为img标签绑定onclick事件
<img id="changeCheckCode" src="${pageContext.request.contextPath }/CheckImg" onclick="changeCheckCode()"/>
2)书写事件内容,重新发送请求更换验证码,在最后拼接一个时间戳或者拼接随机数
拼接时间戳
function changeCheckCode(){
$("#changeCheckCode").attr("src","${pageContext.request.contextPath }/CheckImg?time="+new Date().getTime());
}
拼接随机数
function changeCheckCode(){
$("#changeCheckCode").attr("src","${pageContext.request.contextPath }/CheckImg?random="+Math.random());
}
为什么需要在最后拼接上参数呢?
第一次访问获得验证码后,浏览器会将其加入缓存,如果不拼接随机数或者时间戳,浏览器会认为是同一个请求,直接从缓冲中拿验证码。加上参数是为了骗过浏览器,让其认为是不同的请求,从而获取新的验证码。