验证码输入错误怎么再次刷新验证码

利用jQuery的prop()函数获取src属性的值，向Servlet发出请求的时候加一个随机数，保证每次都是不同的请求

<script type="text/javascript">

    //登录页面用到的 layui组件,有表单,弹层,jquery
    layui.use(['form','layer','jquery'],function () {
        var form = layui.form;  //获取表单对象
        var layer = layui.layer;//获取弹出层对象
        var $ = layui.jquery;//获取layui内置的jquery对象
        //提交登陆表单
        form.on('submit(loginBtnFilter)',function (d) {
            // d.field 等于 {key:value,key:value...}
            $.post('UserServlet',d.field,function (rs) {    //jquery的异步提交
                if(rs.code==200){   //如果响应成功,则进入主页面
                    location.href='page?page=main'; // PageServlet 专门管理页面跳转的
                    return false;//终止执行
                }
                console.log(rs.msg);
                //弹出层的提示信息 这里弹出的是失败提示信息
                layer.msg(rs.msg);
                //当然这里也可以根据时间来刷新验证码 用于防止上一次的验证码缓存
                $("#checkCode").prop("src","checkCode" + "?" + Math.random());
            },"json");
            return false;   //组织表单名默认提交
        });

        //点击验证码进行切换
        $("#checkCode").click(function(){
            // 给 img对象的 src属性 ,重新赋值checkCode.do , 时间防止缓存
            $(this).attr("src","checkCode?"+new Date());
        });
    });
</script>

实现验证码Servlet:

@WebServlet("/checkCode")
public class checkCodeServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //拿到验证码工具类对象
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(80, 40, 4, 10);
        String code = lineCaptcha.getCode();//取出的4个字符
        //将code验证码存入session
        req.getSession().setAttribute("code",code);
        //todo 将验证码 图片 输出到页面，并赋值给img 的src
        lineCaptcha.write(resp.getOutputStream());

    }
}