show.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>验证码</title> </head> <script type="text/javascript"> function reLoadImg(){ document.getElementById("checkcodeId").innerHTML=""; document.getElementById("d1").innerHTML=""; document.getElementById("imageId").src="img.jsp?t="+(new Date().getTime()); } function check(){ var ajax; var inputCode=document.getElementById("checkcodeId").value; //conlse.log(res); if(window.XMLHttpRequest){//火狐 ajax= new XMLHttpRequest(); }else if(window.ActiveXObject){//ie ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //queryString=queryString+"param=" + new Date().getTime(); ajax.onreadystatechange = function () { //判断ajax状态码 if(ajax.readyState==4){ //alert(5); //判断响应状态码（200、405、404、500） if(ajax.status==200){ //获取响应内容（相应内容的格式） var res=ajax.responseText; //console.log(res[0]+" "+res[1]); eval("var obj="+res); console.log(obj); if(obj==true){//返回的字符串比较的时候不能带双引号 document.getElementById("d1").innerHTML="验证码正确"; }else if(obj==false){ document.getElementById("d1").innerHTML="验证码错误"; } } } } ajax.open("get","check?inputCode="+inputCode); ajax.send(null); } </script> <body>验证码： <input type="text" size="4" name="checkcode" id="checkcodeId"> <img src="img.jsp" id="imageId"/> <a href="javascript:reLoadImg()">看不清</a> <br> <button onclick="check()">按钮</button> <div id="d1"></div> </body> </html>
注意：后台返回的字符串在js中做判断时，字符串不用加双引号
img.jsp（画验证码）
这里的理论依据是：
网页链接：http://tool.oschina.net/commons/
之前我们的写的jsp都是当成一个html去展示的所以contentype=text/html;
现在如果我们需要将jsp当作产生验证码的图片格式那么contentype就必须要改变了
<%@page import="javax.imageio.ImageIO"%> <%@page import="java.awt.Graphics"%> <%@page import="java.awt.image.BufferedImage"%> <%@page import="java.util.Random"%> <%@page import="java.awt.Color"%> <%@page import="java.awt.Font"%> <%@ page language="java" contentType="image/jpeg; charset=utf-8" pageEncoding="utf-8"%> <%! //随机产生颜色 public Color getColor(){ int r=(int)(Math.random()*255); int g=(int)(Math.random()*255); int b=(int)(Math.random()*255); return new Color(r,g,b); //三个参数RGB } //产生验证码值 public String getnum(){ Random r = new Random(); String num=1000+r.nextInt(9000)+""; return num; } %> <% //由于验证码必须是每次都不一样所以设置为禁止缓存 response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control","no-cache"); response.setHeader("Expirse", "0"); //绘制验证码 BufferedImage image=new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB); //画笔 Graphics graphics= image.getGraphics(); graphics.fillRect(0, 0, 80, 30); //绘制干扰线条 for(int i=0;i<30;i++){ Random r=new Random(); int xBegin=r.nextInt(80); int yBegin=r.nextInt(30); int xEnd=r.nextInt(xBegin+10); int yEnd=r.nextInt(yBegin+10); //设置画笔颜色随机 graphics.setColor(getColor()); //画线 graphics.drawLine(xBegin, yBegin,xEnd,yEnd); } //验证码画笔为黑色 graphics.setColor(Color.BLACK); String checkCode=getnum(); StringBuffer sb = new StringBuffer(""); for(int i=0;i<checkCode.length();i++){ sb.append(checkCode.charAt(i)+" "); } graphics.drawString(sb.toString(), 15, 20); graphics.setFont(new Font("宋体",Font.BOLD,20)); //将正确验证码保存在session中方便比对 session.setAttribute("trueCheckCode",checkCode); ImageIO.write(image, "jpeg", response.getOutputStream()); //关闭 out.clear(); out=pageContext.pushBody(); %>
处理的Servlet
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/check") public class checkOut extends HttpServlet{ @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String input=req.getParameter("inputCode"); String res="false"; resp.setContentType("text/html; charset=utf-8"); String trueCode=(String) req.getSession().getAttribute("trueCheckCode"); if(input.equals(trueCode)){ res="true"; } PrintWriter writer = resp.getWriter(); writer.write(res); writer.close(); } }
效果图：
点击看不进行验证码的刷新，注意并不是刷新整个页面，
1.有一个简单的刷新办法就是在看不清的href="show.jsp"但是这样是刷新了整个界面，很没有必要
2.有一个办法就是在点击看不清时让它不进行跳转而是执行js中的一个函数（我也是这么做的）
这一句让它执行js中reLoadImg()函数
<a href="javascript:reLoadImg()">看不清</a>
注意在改变动态图片的src时，后面必须加一个随机数，否则它会认为请求已经处理过了，所以这次请求无效（现象：不会刷新验证码）。
function reLoadImg(){ document.getElementById("checkcodeId").innerHTML=""; document.getElementById("d1").innerHTML=""; document.getElementById("imageId").src="img.jsp?t="+(new Date().getTime()); }
格式2：
show.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>验证码</title> </head> <script type="text/javascript"> function reLoadImg(){ document.getElementById("i2").style.display="none"; document.getElementById("checkcodeId").innerHTML=""; document.getElementById("d1").innerHTML=""; document.getElementById("imageId").src="img.jsp?t="+(new Date().getTime()); } function check(){ var ajax; var inputCode=document.getElementById("checkcodeId").value; //conlse.log(res); if(window.XMLHttpRequest){//火狐 ajax= new XMLHttpRequest(); }else if(window.ActiveXObject){//ie ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //queryString=queryString+"param=" + new Date().getTime(); ajax.onreadystatechange = function () { //判断ajax状态码 if(ajax.readyState==4){ //alert(5); //判断响应状态码（200、405、404、500） if(ajax.status==200){ //获取响应内容（相应内容的格式） var res=ajax.responseText; //console.log(res[0]+" "+res[1]); //alert(11); //eval("var obj="+res); //console.log(res); document.getElementById("i2").src=res; document.getElementById("i2").style.display="inline"; document.getElementById("i2").style.width=40+"px"; document.getElementById("i2").style.height=40+"px"; } } } ajax.open("get","check?inputCode="+inputCode); ajax.send(null); } </script> <body>验证码： <input type="text" size="4" name="checkcode" id="checkcodeId" onmouseout="check()"> <img src="img.jsp" id="imageId"/> <a href="javascript:reLoadImg()">看不清</a> <img src="" id="i2"> </body> </html>
img.jsp没变
Servlet
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/check") public class checkOut extends HttpServlet{ @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String input=req.getParameter("inputCode"); String res="img/judge1.jpg"; resp.setContentType("text/html; charset=utf-8"); String trueCode=(String) req.getSession().getAttribute("trueCheckCode"); if(input.equals(trueCode)){ res="img/judge2.jpg"; } PrintWriter writer = resp.getWriter(); writer.write(res); writer.close(); } }
效果：输入验证码后当鼠标移出输入文本框（触发mouseout事件）后台返回图片地址图片是一个对勾和一个叉
点击看不清，判断图片消失
点击看不清后：
