主要利用JSP+Servlet实现验证码生成
利用JQuery的ajax技术实现异步更换图片地址
BufferedImage实现验证码图片的生成
Servlet代码：
package Register;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* Servlet implementation class GetCode
*/
public class GetCode extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public GetCode() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
BufferedImage img = new BufferedImage(100,30,BufferedImage.TYPE_INT_ARGB_PRE);
Graphics g =img.getGraphics();
g.setColor(Color.gray);
g.fillRect(0, 0, 80, 30); //画验证码背景
g.setColor(Color.white);
g.setFont(new Font("宋体",Font.BOLD,30));
Random rand = new Random();
String code = "";
for(int i=0;i<4;i++){ //随机生成4位数字验证码
code += rand.nextInt(10);
}
g.drawString(code, 5, 25);
ImageIO.write(img, "png", new File("d:/"+code+".png")); //生成验证码图片
response.getWriter().println(code); //验证码返回前台
}
/**
* @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);
}
}
前台JSP页面：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var code;
$.ajax({ //接收验证码
url:"GetCode",
type:"POST",
success:function(data, textStatus){
code =$.trim(data);
$("img").attr({ src:"d:/"+code+".png"}); //改变验证码地址
},
error:function(XMLHttpRequest, textStatus, errorThrown){
}
});
$("#img").click(function(){ //img标签绑定点击事件，点击更换图片
$.ajax({
url:"GetCode",
type:"POST",
success:function(data, textStatus){
code =$.trim(data);
$("img").attr({ src:"d:/"+code+".png"});
},
error:function(XMLHttpRequest, textStatus, errorThrown){
}
});
});
$("#code").blur(function(){ //判断输入的验证码和生成的是否一致
if($("#code").val()!=code){
$("#code").css("background-color","#F00");
}
else{
$("#code").css("background-color","#0f0");
}
});
});
</script>
</head>
<body>
<form action="#">
帐 号<input type="text" name="username" id="username" /><br><br>
密 码<input type="password" name="password" id="password" /><br><br>
验证码<input type="text" name="code" id="code" /><img id="img" src="#"><br><br>
<input type="submit" value="注册">
</form>
</body>
</html>
时间： 2024-08-02 17:22:39