一、前端登錄界面jsp：
很簡單，就一個文本框和一個圖片標籤：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
驗證碼：<input id="yzm" name="code" type="text" />
<img src="ImageServlet">
</body>
</html>
二、圖片服務器（我們把驗證碼放入到了session中，便於下一步的判斷）：
package cn.skh.servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ImageServlet
*/
@WebServlet("/ImageServlet")
public class ImageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ImageServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setHeader("Expires", "-1");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
int width = 120;
int height = 25;
//創建一副內存圖像：BufferedImage
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//得到屬於該圖片的畫筆：Graphics
Graphics g = image.getGraphics();
//畫邊框
g.setColor(Color.BLUE);
g.drawRect(0, 0, width, height);
//填充背景色
g.setColor(Color.YELLOW);
g.fillRect(1, 1, width-2, height-2);
//畫干擾線
g.setColor(Color.GRAY);
Random r = new Random();
for(int i=0;i<10;i++)
g.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height));
//隨機數字
g.setColor(Color.RED);
g.setFont(new Font("宋體", Font.BOLD|Font.ITALIC, 20));
int x = 23;
StringBuffer sb = new StringBuffer();
for(int i=0;i<4;i++){
String code = r.nextInt(10)+"";
sb.append(code);
g.drawString(code, x, 20);
x+=20;
}
System.out.println(sb.toString());
//把驗證碼放到HttpSession中
request.getSession().setAttribute("code", sb.toString());
//輸出到瀏覽器的頁面上:ImageIO
ImageIO.write(image, "jpg", response.getOutputStream());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
三、Ajax，在這裏我是用的是post方法：給文本框添加了一個失去焦點的事件
<script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#yzm").blur(function(){
var code = $("#yzm").val();
$.post(
"DoImg",{"code":code},
function(result){
if(result=="true"){
alert("Success");
}else{
alert("Default");
}
}
);
});
});
四、驗證Servlet：
package cn.skh.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class DoImg
*/
@WebServlet("/DoImg")
public class DoImg extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DoImg() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String code1 = request.getParameter("code");
String code = (String) (request.getSession().getAttribute("code"));
if(code1.equals(code)){
response.getWriter().print("true");
}else {
response.getWriter().print("false");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
功能效果：r如果輸入驗證碼正確會彈出Success的窗口，否則會彈出Default的窗口