最近我的小可爱说，她不会用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">验 证 码：</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的方式异步进行验证码的验证的过程，如果过程中有什么问题，希望大家不吝赐教！
怎么样，我的小可爱都学会了，大家怎么样了，大家可以在评论区留言哦！
