jquery实现无刷新验证码的简单实例
1.思路:
页面上的验证码图片是servlet,采用jquery实现异步校验信息
2.所用到的文件
VerifyCodeServlet.java --用于生成图片的servlet
ResultServlet.java --用于校验验证码正确性的servlet
verifyCode.js --校验的js文件
jquery.js --jquery包里的源文件
verifyCode.jsp --页面
3.代码
VerifyCodeServlet.java
Java代码
importjava.awt.Color;
importjava.awt.Font;
importjava.awt.Graphics2D;
importjava.awt.image.BufferedImage;
importjava.util.Random;
importjavax.imageio.ImageIO;
importjavax.servlet.ServletException;
importjavax.servlet.ServletOutputStream;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjavax.servlet.http.HttpSession;
publicclassVerifyCodeServletextendsHttpServlet{
//验证码图片的宽度。
privateintwidth=60;
//验证码图片的高度。
privateintheight=20;
//验证码字符个数
privateintcodeCount=4;
privateintx=0;
//字体高度
privateintfontHeight;
privateintcodeY;
char[]codeSequence={'A','B','C','D','E','F','G','H','I','J',
'K','L','M','N','O','P','Q','R','S','T','U','V','W',
'X','Y','Z','0','1','2','3','4','5','6','7','8','9'};
/**
*初始化验证图片属性
*/
publicvoidinit()throwsServletException{
//从web.xml中获取初始信息
//宽度
StringstrWidth=this.getInitParameter("width");
//高度
StringstrHeight=this.getInitParameter("height");
//字符个数
StringstrCodeCount=this.getInitParameter("codeCount");
//将配置的信息转换成数值
try{
if(strWidth!=null&&strWidth.length()!=0){
width=Integer.parseInt(strWidth);
}
if(strHeight!=null&&strHeight.length()!=0){
height=Integer.parseInt(strHeight);
}
if(strCodeCount!=null&&strCodeCount.length()!=0){
codeCount=Integer.parseInt(strCodeCount);
}
}catch(NumberFormatExceptione){
}
x=width/(codeCount+1);
fontHeight=height-2;
codeY=height-4;
}
protectedvoidservice(HttpServletRequestreq,HttpServletResponseresp)
throwsServletException,java.io.IOException{
//定义图像buffer
BufferedImagebuffImg=newBufferedImage(width,height,
BufferedImage.TYPE_INT_RGB);
Graphics2Dg=buffImg.createGraphics();
//创建一个随机数生成器类
Randomrandom=newRandom();
//将图像填充为白色
g.setColor(Color.WHITE);
g.fillRect(0,0,width,height);
//创建字体，字体的大小应该根据图片的高度来定。
Fontfont=newFont("Fixedsys",Font.PLAIN,fontHeight);
//设置字体。
g.setFont(font);
//画边框。
g.setColor(Color.BLACK);
g.drawRect(0,0,width-1,height-1);
//随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。
g.setColor(Color.BLACK);
for(inti=0;i<160;i++){
intx=random.nextInt(width);
inty=random.nextInt(height);
intxl=random.nextInt(12);
intyl=random.nextInt(12);
g.drawLine(x,y,x+xl,y+yl);
}
//randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
StringBufferrandomCode=newStringBuffer();
intred=0,green=0,blue=0;
//随机产生codeCount数字的验证码。
for(inti=0;i<codeCount;i++){
//得到随机产生的验证码数字。
StringstrRand=String.valueOf(codeSequence[random.nextInt(36)]);
//产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。
red=random.nextInt(255);
green=random.nextInt(255);
blue=random.nextInt(255);
//用随机产生的颜色将验证码绘制到图像中。
g.setColor(newColor(red,green,blue));
g.drawString(strRand,(i+1)*x,codeY);
//将产生的四个随机数组合在一起。
randomCode.append(strRand);
}
//将四位数字的验证码保存到Session中。
HttpSessionsession=req.getSession();
session.setAttribute("validateCode",randomCode.toString());
//禁止图像缓存。
resp.setHeader("Pragma","no-cache");
resp.setHeader("Cache-Control","no-cache");
resp.setDateHeader("Expires",0);
resp.setContentType("image/jpeg");
//将图像输出到Servlet输出流中。
ServletOutputStreamsos=resp.getOutputStream();
ImageIO.write(buffImg,"jpeg",sos);
sos.close();
}
}
importjava.awt.Color;
importjava.awt.Font;
importjava.awt.Graphics2D;
importjava.awt.image.BufferedImage;
importjava.util.Random;
importjavax.imageio.ImageIO;
importjavax.servlet.ServletException;
importjavax.servlet.ServletOutputStream;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjavax.servlet.http.HttpSession;
publicclassVerifyCodeServletextendsHttpServlet{
//验证码图片的宽度。
privateintwidth=60;
//验证码图片的高度。
privateintheight=20;
//验证码字符个数
privateintcodeCount=4;
privateintx=0;
//字体高度
privateintfontHeight;
privateintcodeY;
char[]codeSequence={'A','B','C','D','E','F','G','H','I','J',
'K','L','M','N','O','P','Q','R','S','T','U','V','W',
'X','Y','Z','0','1','2','3','4','5','6','7','8','9'};
/**
*初始化验证图片属性
*/
publicvoidinit()throwsServletException{
//从web.xml中获取初始信息
//宽度
StringstrWidth=this.getInitParameter("width");
//高度
StringstrHeight=this.getInitParameter("height");
//字符个数
StringstrCodeCount=this.getInitParameter("codeCount");
//将配置的信息转换成数值
try{
if(strWidth!=null&&strWidth.length()!=0){
width=Integer.parseInt(strWidth);
}
if(strHeight!=null&&strHeight.length()!=0){
height=Integer.parseInt(strHeight);
}
if(strCodeCount!=null&&strCodeCount.length()!=0){
codeCount=Integer.parseInt(strCodeCount);
}
}catch(NumberFormatExceptione){
}
x=width/(codeCount+1);
fontHeight=height-2;
codeY=height-4;
}
protectedvoidservice(HttpServletRequestreq,HttpServletResponseresp)
throwsServletException,java.io.IOException{
//定义图像buffer
BufferedImagebuffImg=newBufferedImage(width,height,
BufferedImage.TYPE_INT_RGB);
Graphics2Dg=buffImg.createGraphics();
//创建一个随机数生成器类
Randomrandom=newRandom();
//将图像填充为白色
g.setColor(Color.WHITE);
g.fillRect(0,0,width,height);
//创建字体，字体的大小应该根据图片的高度来定。
Fontfont=newFont("Fixedsys",Font.PLAIN,fontHeight);
//设置字体。
g.setFont(font);
//画边框。
g.setColor(Color.BLACK);
g.drawRect(0,0,width-1,height-1);
//随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。
g.setColor(Color.BLACK);
for(inti=0;i<160;i++){
intx=random.nextInt(width);
inty=random.nextInt(height);
intxl=random.nextInt(12);
intyl=random.nextInt(12);
g.drawLine(x,y,x+xl,y+yl);
}
//randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
StringBufferrandomCode=newStringBuffer();
intred=0,green=0,blue=0;
//随机产生codeCount数字的验证码。
for(inti=0;i<codeCount;i++){
//得到随机产生的验证码数字。
StringstrRand=String.valueOf(codeSequence[random.nextInt(36)]);
//产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。
red=random.nextInt(255);
green=random.nextInt(255);
blue=random.nextInt(255);
//用随机产生的颜色将验证码绘制到图像中。
g.setColor(newColor(red,green,blue));
g.drawString(strRand,(i+1)*x,codeY);
//将产生的四个随机数组合在一起。
randomCode.append(strRand);
}
//将四位数字的验证码保存到Session中。
HttpSessionsession=req.getSession();
session.setAttribute("validateCode",randomCode.toString());
//禁止图像缓存。
resp.setHeader("Pragma","no-cache");
resp.setHeader("Cache-Control","no-cache");
resp.setDateHeader("Expires",0);
resp.setContentType("image/jpeg");
//将图像输出到Servlet输出流中。
ServletOutputStreamsos=resp.getOutputStream();
ImageIO.write(buffImg,"jpeg",sos);
sos.close();
}
}
ResultServlet.java
Java代码
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassResultServletextendsHttpServlet{
/**
*ThedoGetmethodoftheservlet.<br>
*
*Thismethodiscalledwhenaformhasitstagvaluemethodequalstoget.
*
*@paramrequesttherequestsendbytheclienttotheserver
*@paramresponsetheresponsesendbytheservertotheclient
*@throwsServletExceptionifanerroroccurred
*@throwsIOExceptionifanerroroccurred
*/
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
doPost(request,response);
}
/**
*ThedoPostmethodoftheservlet.<br>
*
*Thismethodiscalledwhenaformhasitstagvaluemethodequalstopost.
*
*@paramrequesttherequestsendbytheclienttotheserver
*@paramresponsetheresponsesendbytheservertotheclient
*@throwsServletExceptionifanerroroccurred
*@throwsIOExceptionifanerroroccurred
*/
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType("text/html;charset=utf-8");
StringvalidateC=(String)request.getSession().getAttribute("validateCode");
StringveryCode=request.getParameter("c");
PrintWriterout=response.getWriter();
if(veryCode==null||"".equals(veryCode)){
out.println("验证码为空");
}else{
if(validateC.equals(veryCode)){
out.println("验证码正确");
}else{
out.println("验证码错误");
}
}
out.flush();
out.close();
}
}
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassResultServletextendsHttpServlet{
/**
*ThedoGetmethodoftheservlet.<br>
*
*Thismethodiscalledwhenaformhasitstagvaluemethodequalstoget.
*
*@paramrequesttherequestsendbytheclienttotheserver
*@paramresponsetheresponsesendbytheservertotheclient
*@throwsServletExceptionifanerroroccurred
*@throwsIOExceptionifanerroroccurred
*/
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
doPost(request,response);
}
/**
*ThedoPostmethodoftheservlet.<br>
*
*Thismethodiscalledwhenaformhasitstagvaluemethodequalstopost.
*
*@paramrequesttherequestsendbytheclienttotheserver
*@paramresponsetheresponsesendbytheservertotheclient
*@throwsServletExceptionifanerroroccurred
*@throwsIOExceptionifanerroroccurred
*/
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType("text/html;charset=utf-8");
StringvalidateC=(String)request.getSession().getAttribute("validateCode");
StringveryCode=request.getParameter("c");
PrintWriterout=response.getWriter();
if(veryCode==null||"".equals(veryCode)){
out.println("验证码为空");
}else{
if(validateC.equals(veryCode)){
out.println("验证码正确");
}else{
out.println("验证码错误");
}
}
out.flush();
out.close();
}
}
verifyCode.js
Js代码
functionchangeImg(){
varimgSrc=$("#imgObj");
varsrc=imgSrc.attr("src");
imgSrc.attr("src",chgUrl(src));
}
//时间戳
//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
functionchgUrl(url){
vartimestamp=(newDate()).valueOf();
url=url.substring(0,17);
if((url.indexOf("&")>=0)){
url=url+"×tamp="+timestamp;
}else{
url=url+"?timestamp="+timestamp;
}
returnurl;
}
functionisRightCode(){
varcode=$("#veryCode").attr("value");
code="c="+code;
$.ajax({
type:"POST",
url:"resultServlet",
data:code,
success:callback
});
}
functioncallback(data){
$("#info").html(data);
}
functionchangeImg(){
varimgSrc=$("#imgObj");
varsrc=imgSrc.attr("src");
imgSrc.attr("src",chgUrl(src));
}
//时间戳
//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
functionchgUrl(url){
vartimestamp=(newDate()).valueOf();
url=url.substring(0,17);
if((url.indexOf("&")>=0)){
url=url+"×tamp="+timestamp;
}else{
url=url+"?timestamp="+timestamp;
}
returnurl;
}
functionisRightCode(){
varcode=$("#veryCode").attr("value");
code="c="+code;
$.ajax({
type:"POST",
url:"resultServlet",
data:code,
success:callback
});
}
functioncallback(data){
$("#info").html(data);
}
verifyCode.jsp
Html代码
<%@pagelanguage="java"contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <scripttype="text/javascript"src="js/verifyCode.js"></script> <scripttype="text/javascript"src="js/jquery.js"></script> <title>testverifycode</title> </head> <body> <inputid="veryCode"name="veryCode"type="text"/> <imgid="imgObj"alt=""src="verifyCodeServlet"/> <ahref="#"onclick="changeImg()">换一张</a> <inputtype="button"value="验证"onclick="isRightCode()"/> <divid="info"></div> </body> </html>
以上这篇jquery实现无刷新验证码的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。