验证码程序

前台写一个验证码输入框，显示一个验证码图片

<input type="text" name="checkCode" placeholder="验证码"  style="width: 130px"/>
<div class="login-center-input-text">验证码</div>
<img id="checkCode" alt="验证码" src="checkCode" style="width: 70px;margin-left: 20px">

给验证码添加一个点击切换功能

<script type="text/javascript">
       //点击验证码进行切换
        $("#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 {
        //拿到验证码工具类对象（验证码图片宽120 高40 四位 6个干扰圈
        CircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(120, 40, 4, 6);
        //取验证码的值 四个
        String code = circleCaptcha.getCode();
        //把验证存入session
        req.getSession().setAttribute("code",code);
        //把图片写出去
        circleCaptcha.write(resp.getOutputStream());
    }
}

后台判断时

String checkCode = req.getParameter("checkCode");
String code= (String) req.getSession().getAttribute("code");
if (!checkCode.equalsIgnoreCase(code)){
//这里调用的是两个自己写的方法，就是往前台书写JSON数据
    JsonData jsonData = JsonData.buildError("验证码错误！");
    PrintJsonData.read(resp,jsonData);
}

验证码输入错误或者账号密码错误刷新验证码
在前台验证登录是否成功的if判断else内调用点击切换方法即可

$.post('user',d.field,function (rs) {    //jquery的异步提交
    if(rs.code==200){   //如果响应成功,则进入主页面
        location.href='page?page=main'; // PageServlet 专门管理页面跳转的
        return false;//终止执行
    }else{
        $("#checkCode").click();
    }
    console.log(rs.msg);
    //弹出层的提示信息
    layer.msg(rs.msg);
},"json");