点击刷新验证码

这里只是贴前端部分代码

页面

 <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刷新的。

后面的参数必须

①:带时间参数

//刷新验证码
$(document).on('click','#changeCode',function(){
    var img=document.getElementById("codeImg");
    img.src=path+"/gif/getGifCode?"+new Date().getTime(); 
});

②:带随机数

//刷新验证码
$(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());
        }
    }

实现效果

原文地址:https://www.cnblogs.com/zeussbook/p/10785381.html