jsp servlet jquery 实现图片验证码的异步刷新

2024-11-08 技术教程

近日，遇到和验证码问题，在网上找了很多资料加自己的总结，得到可实现代码

login.jsp代码
<%@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"><title>oa自动化办公系统</title><linkrel="stylesheet"href="/soa/css/login.css"/><scripttype="text/javascript"src="/soa/js/jquery-3.0.0.js"></script><scripttype="text/javascript">$(function(){$("#verifyimg").click(function(){$.get("/soa/identCodeServlet.do",function(data){//此处是刷新的关键$("#verifyimg").attr("src","/soa/identCodeServlet.do");});});});</script></head><body><divid="login"><div><formaction=""method="post"><table><tr><tdcolspan="3"><h2>oa自动办公系统</h2><spanid="s_1">登陆</span></td></tr><tr><tdclass="f1">用户名：</td><tdcolspan="2"><inputclass="in1"type="text"name="lname"/></td></tr><tr><tdclass="f1">密 码：</td><tdcolspan="2"><inputclass="in1"type="password"name="lpwd"/></td></tr><tr><tdclass="f1">验证码：</td><td><inputclass="in1"id="v1"maxlength="4"type="text"name="verify"/></td><td><imgid="verifyimg"src="/soa/identCodeServlet.do"></td></tr><tr><tdcolspan="3"><inputid="submit"type="submit"value="登陆"/></td></tr></table></form></div></div></body></html>
IdentCodeServlet.java 代码
packagecom.eduask.oa.servlet;importjava.awt.Color;importjava.awt.Font;importjava.awt.Graphics;importjava.awt.p_w_picpath.BufferedImage;importjava.io.IOException;importjavax.p_w_picpathio.ImageIO;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importcom.eduask.oa.util.CreateRandomCode;/***将生成的验证码作为图片输出*@authorMaibenben**/publicclassIdentCodeServletextendsHttpServlet{privatestaticfinallongserialVersionUID=1L;protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{doGet(request,response);}protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//1.禁止浏览器缓存随机图片response.setDateHeader("Expires",-1);response.setHeader("Cache-Control","no-cache");response.setHeader("Pragma","no-cache");//2.通知服务器以图片的方式发送数据response.setHeader("Content-Type","p_w_picpath/jpeg");//3.在内存创建一张图片BufferedImagep_w_picpath=newBufferedImage(150,50,BufferedImage.TYPE_INT_BGR);//4.向图片上写数据Graphicsg=p_w_picpath.getGraphics();//5.设置背景色g.setColor(Color.gray);g.fillRect(0,0,150,50);//6.设置写入数据的颜色和字体g.setColor(Color.red);g.setFont(newFont(null,Font.BOLD,50));//7.想图片上写数据StringrandomNum=newCreateRandomCode().createRandomCode();request.getSession().setAttribute("checkRandomCode",randomNum);g.drawString(randomNum,20,40);System.out.println(randomNum);//8.把写好的图片输出到浏览器ImageIO.write(p_w_picpath,"jpg",response.getOutputStream());}}
生成4位随机验证码代码CreateRandomCode.java
packagecom.eduask.oa.util;/***随机产生4位数字或字母混合*@authorMaibenben**/publicclassCreateRandomCode{privatechar[]code={'0','1','2','3','4','5','6','7','8','9','0','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'};/***生成4位验证码*@return*/publicStringcreateRandomCode(){char[]codeRandom=newchar[4];//循环取得其中随机字符for(inti=0;i<codeRandom.length;i++){intrandom=(int)(Math.random()*code.length);codeRandom[i]=code[random];}//将字符数组转为StringStringBuffersb=newStringBuffer();for(inti=0;i<codeRandom.length;i++){sb.append(codeRandom[i]);}returnsb.toString();}}
这只是简单的验证码图片刷新，希望可以帮到正在寻找答案的你