这里只是贴前端部分代码
页面
- <p style="margin-bottom: 0px" id="codeBox">
- <img src="${rc.contextPath}/gif/getGifCode" id="codeImg" alt="验证码" width="146px" height="33px">
- <a href="javascript:void(0);" id="changeCode"> 看不清, 换一张 </a>
- </p>
JS 部分, 没错这个是不需要 Ajax 刷新的.
后面的参数必须
1: 带时间参数
- // 刷新验证码
- $(document).on('click','#changeCode',function(){
- var img=document.getElementById("codeImg");
- img.src=path+"/gif/getGifCode?"+new Date().getTime();
- });
2: 带随机数
- // 刷新验证码
- $(document).on('click','#changeCode',function(){
- var randomnum = Math.random();
- var img=document.getElementById("codeImg");
- img.src=path+"/gif/getGifCode?"+randomnum;
- });
后台
- /**
- * 获取验证码 (Gif 版本)
- * @param response
- */
- @RequestMapping(value={"/getGifCode","/changeGifCode"},method= RequestMethod.GET)
- public void getGifCode(HttpServletResponse response, HttpServletRequest request){
- try {
- response.setHeader("Pragma", "No-cache");
- response.setHeader("Cache-Control", "no-cache");
- response.setDateHeader("Expires", 0);
- response.setContentType("image/gif");
- /**
- * gif 格式动画验证码
- * 宽, 高, 位数 (验证码位数).
- */
- Captcha captcha = new GifCaptcha(290,33,6);
- // 输出
- captcha.out(response.getOutputStream());
- HttpSession session = request.getSession(true);
- String id = request.getSession().getId();
- // 存入 Redis
- redisService.setString("code"+id,captcha.text().toLowerCase());
- //System.out.println("code"+id+"*****"+captcha.text().toLowerCase());
- } catch (Exception e) {
- System.err.println("获取验证码异常:"+e.getMessage());
- }
- }
实现效果
来源: http://www.bubuko.com/infodetail-3039446.html