一、前端登录界面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的窗口