最近我的小可愛說，她不會用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的方式異步進行驗證碼的驗證的過程，如果過程中有什麼問題，希望大家不吝賜教！
怎麼樣，我的小可愛都學會了，大家怎麼樣了，大家可以在評論區留言哦！
