点击刷新验证码

zeussbook 2021-08-31 原文

这里只是贴前端部分代码

页面

 <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());
        }
    }

实现效果