1.前台的jsp页面设置一张图片和对应按钮如下:
<img src="${pageContext.request.contextPath}/user/captcha-image.do" id="kaptchaImage" class="img-sty"/>
<button type="button" class="btn btn-md btn-warning change" onclick="changeCode()">换一张</button>
2.按钮的点击事件,JavaScript函数如下:
function changeCode() { //刷新
$('#kaptchaImage').removeAttr("src");
$('#kaptchaImage').hide().attr('src', contextPath+'/user/captcha-image.do').fadeIn();
}
3.'/user/captcha-image.do'对应的后台方法如下:
@RequestMapping("/captcha-image")
public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
/*设置返回头信息,内容类型为图片*/
response.setDateHeader("Expires", 0);
response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
response.addHeader("Cache-Control", "post-check=0, pre-check=0");
response.setHeader("Pragma", "no-cache");
response.setContentType("image/jpeg");
/*产生验证码,并设置在session中*/
String capText = captchaProducer.createText();
request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
/*产生验证码图片,并返回给前端*/
BufferedImage bi = captchaProducer.createImage(capText);
ServletOutputStream out = response.getOutputStream();
ImageIO.write(bi, "jpg", out);
try {
out.flush();
} finally {
out.close();
}
return null;
}
最后,问题来了。
当我每次刷新页面的时候,验证码都可以正常变化。
但是点【换一张】那个按钮的时候,验证码却不会变化?
更奇怪的是,如果连续快速点击【换一张】的时候,验证码就会变化了。
真是头疼啊,望大神指点迷津