zoukankan      html  css  js  c++  java
  • 点击刷新验证码

    这里只是贴前端部分代码

    页面

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

    实现效果

  • 相关阅读:
    zookeeper + dubbo 搭建
    java 测试 powermock 使用
    设计模式(结构型模式) 之 装饰器模式
    设计模式(创建型模式)工厂模式
    设计模式(结构型模式) 之 桥接模式
    django基础(转载)
    Django之ORM学习
    Django之form组件的学习
    Django之中间件学习
    Django之model 详解
  • 原文地址:https://www.cnblogs.com/zeussbook/p/10785381.html
Copyright © 2011-2022 走看看