ajax的方式对随机生成的4位验证码进行验证(小可爱都能学会的那种)

最近我的小可爱说，她不会用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-9999
		int 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",//请求的url
                    type:"POST",//发送请求的方式为POST
                    data:"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的方式异步进行验证码的验证的过程，如果过程中有什么问题，希望大家不吝赐教！

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