最近我的小可爱说，她不会用jax的方式对随机生成的4位验证码进行验证，我当时就急了，这不得展示一下我的“技术”，美美的撩五我的小可爱！

正文区

相信大家在实现登录的时候，都使用过验证码，传统的方式是servlet的方式，在servlet中定义一个处理器，然后再进行验证，整个form中的数据只能一次性的整个提交，提交之后交给servlet来处理，判断哪一个条件不符合然后，给用户提示：

但是大家有没有发现，这样的效率太低了，如果我直接输入用户名，通过发ajax请求，在控制器中直接 进行判断 ，然后将结果通过局部刷新的方式响应给用户，这样就会大大提交效率，下面我们用发ajax的方式对验证码进行局部刷新！

代码区

首先你得有一个验证码，当然，这个验证码是一个图片：

• imgs.jsp

<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@ page import="java.awt.*" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page contentType="image/jpeg; charset=UTF-8" language="java"%><%!//随机产生颜色public Color getColor(){Random ran = new Random();int r = ran.nextInt(256);int g = ran.nextInt(256);int b = ran.nextInt(256);return new Color(r,g,b);}//产生验证码值public String getNum(){//1000-9999int ran = (int)(Math.random()*9000)+1000;return String.valueOf(ran);}%>
<%//禁止缓存，防止验证码过期response.setHeader("Prama", "no-cache");response.setHeader("Cache-control", "no-cache");response.setHeader("Expires", "0");//绘制验证码BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_BGR);//画笔Graphics graphics = image.getGraphics();graphics.fillRect(0, 0, 80, 30);//绘制干扰线条for(int i = 0;i < 60;i++){Random ran = new Random();int xBegin = ran.nextInt(80);int yBegin = ran.nextInt(30);int xEnd = ran.nextInt(xBegin + 10);int yEnd = ran.nextInt(yBegin + 10);graphics.setColor(getColor());//绘制线条graphics.drawLine(xBegin, yBegin, xEnd, yEnd);}graphics.setFont(new Font("seif",Font.BOLD,20));//绘制验证码graphics.setColor(Color.BLACK);String checkCode = getNum();StringBuffer sb = new StringBuffer();for(int i = 0;i < checkCode.length();i++){sb.append(checkCode.charAt(i)+" ");//验证码的每一位数字}//graphics.drawString(sb.toString(), 15, 20);//绘制验证码//将验证码真实值 保存在session中，供使用时比较真实性session.setAttribute("CKECKCODE",checkCode);//真实的产生图片ImageIO.write(image, "jpeg", response.getOutputStream());//关闭操作out.clear();out = pageContext.pushBody();
%>

这里用的是bootstrap，不会用的大家可以去恶补一下，当然 大家也可以自由发挥，主要是要搞懂原理：

• index.jsp

<div class="form-group"><label class="col-sm-2 control-label">验&nbsp;&nbsp;证&nbsp;&nbsp;码：</label><div class="col-sm-10" style="width: 90px;padding-left: 30px"><input type="text" style="width: 90px;display:block" id="checkcodeId" class="form-control" name="Yzm" placeholder="验证码"></div><!--<input class="yzm" type="text" id="checkcode" name="checkcode"size="4">--><div class="imghh"style="float: left;padding-left: 40px"><img src="imgs.jsp" id="get_Yzm" name="Img" onclick="reImg();"/><br/></div>//用来显示验证后的验证码的正确性<div class="col-sm-2"><span id="tip" style="vertical-align: middle;position: absolute ;left: 50px"></span></div></div><script type="text/javascript" >function reImg(){var img = document.getElementById("Img");var i = Math.random();img.src="imgs.jsp?id="+i;}//jquery的入口函数$(function () {//id为checkcodeId，鼠标失去焦点时，发ajax请求$("#checkcodeId").blur(function () {//拿到id为checkcodeId输入框中的值var $Yzm = $("#checkcodeId").val();$.ajax({url:"getYzm",//请求的urltype:"POST",//发送请求的方式为POSTdata:"Yzm="+$Yzm,//传入的参数拿到的输入框中的值 success:function (result) {var resultHtml = $("<img src='"+result+"' height='30px' width='30px'>");//将这个标签通过html的方式写入到id为tip的位置上//注意通过html的方式可以保留标签$("#tip").html(resultHtml);}});});});</script>

• loginController.java

@RequestMapping("/getYzm")public void  getYzm(HttpServletRequest request , HttpServletResponse response) throws IOException {//定义初值String resultTyp = "img/x.png";//拿到用户输入的值String YzmClient = request.getParameter("Yzm");//获取服务器中session中的值 String YzmService = (String)request.getSession().getAttribute(("CKECKCODE"));System.out.println(YzmService);if (YzmService.equals(YzmClient)){resultTyp="img/v.png";}response.setContentType("text/html; charset=UTF-8");PrintWriter writer = response.getWriter();//输出流writer.write(resultTyp);writer.flush();writer.close();}

效果区

好了，下面我们来看实现的效果：

前方高能：

这两个图标我也给大家，要不然大家找也不方便：

链接：https://pan.baidu.com/s/1AUDymnlmwKvAB_O5pPRttA
提取码：gig7

这就是通过ajax的方式异步进行验证码的验证的过程，如果过程中有什么问题，希望大家不吝赐教！

怎么样，我的小可爱都学会了，大家怎么样了，大家可以在评论区留言哦！