您的位置：首页 > Web前端 > JavaScript

JSP+Servlet实现验证码生成

2015-08-05 12:56 701 查看

主要利用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航