我采用的是Spring boot
1:pom.xml依赖
<!-- Hutool 依赖--> <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.4.5</version> </dependency>
2:前端页面:
<img src="/getImage?count=0" id="authCodeImg" onclick="changeCodeImg(this)"><!--显示的验证码-->
<input type="text" id="name1" class="form-control" placeholder="请输入验证码" aria-describedby="basic-addon2">
<!--验证验证码-->
3:前端ajax请求:
//<!-- 图文验证码验证--> $('#name1').blur(function () { $.ajax({ url: "/getverfy", type: "post", data: { vername:$("#name1").val() }, success: function (result) { if(result=="图文验证成功") { }else{ alert("图文验证失败!") location.reload(); } } }) })
//图文验证码
$.ajax({
url: "/getImage",
type: "post",
data: {
},
success: function (result) {
result.src = "/getImage?count=1×tamp="+new Date().getTime();
}
})
controller:
/** * 生成图片验证码 * @param request * @param response */ @RequestMapping("getImage") public void ImgCode(HttpServletRequest request, HttpServletResponse response) { LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100); try { request.getSession().setAttribute("CAPTCHA_KEY", lineCaptcha.getCode()); response.setContentType("image/png"); response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expire", 0); lineCaptcha.write(response.getOutputStream()); } catch (Exception e) { e.printStackTrace(); } } /** * 对验证码进行输入验证 * @param vername * @return */ @RequestMapping("getverfy") public @ResponseBody String verfy(String vername) { if (lineCaptcha.verify(vername)) { return "图文验证成功"; } return "图文验证失败"; }
本文暂时没有评论,来添加一个吧(●'◡'●)