Java、Servlet、JSP和Ajax实现验证码

字体大小: 中小 标准 ->行高大小: 标准

环境:

  windows7,MyEclipse 9

首先是写生成验证图片的类:

复制代码
 1 package cn.com.leamon.util;
 2 
 3 import java.awt.Color;
 4 import java.awt.Font;
 5 import java.awt.Graphics2D;
 6 import java.awt.image.BufferedImage;
 7 import java.io.IOException;
 8 import java.util.Random;
 9 
10 import javax.servlet.ServletException;
11 import javax.servlet.ServletOutputStream;
12 import javax.servlet.http.HttpServlet;
13 import javax.servlet.http.HttpServletRequest;
14 import javax.servlet.http.HttpServletResponse;
15 import javax.servlet.http.HttpSession;
16 
17 import com.sun.image.codec.jpeg.JPEGCodec;
18 import com.sun.image.codec.jpeg.JPEGImageEncoder;
19 
20 public class IdenCode extends HttpServlet {
21     /** 
22      *  
23      */
24     private static final long serialVersionUID = 1L;
25 
26     public static final char[] CHARS = { '1', '2', '3', '4', '5', '6', '7',
27             '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
28             'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
29             'X', 'Y', 'Z', };
30     public static Random random = new Random();
31 
32     public static String getRandomString(HttpServletRequest request) {
33         StringBuffer buffer = new StringBuffer();
34         for (int i = 0; i < 9; i++) {
35             buffer.append(CHARS[random.nextInt(CHARS.length)]);
36         }
37          System.out.println(buffer.toString());
38         HttpSession session = request.getSession();
39         session.setAttribute("code", buffer.toString());
40         return buffer.toString();
41     }
42 
43     public static Color getRandomColor() {
44         return new Color(random.nextInt(255), random.nextInt(255),
45                 random.nextInt(255));
46     }
47 
48     public static Color getReverseColor(Color c) {
49         return new Color(255 - c.getRed(), 255 - c.getGreen(),
50                 255 - c.getBlue());
51     }
52 
53     public void doGet(HttpServletRequest request, HttpServletResponse response)
54             throws ServletException, IOException {
55         response.setContentType("image/jpeg");
56         String radomString = getRandomString(request);
57         request.getSession(true).setAttribute("radomString", radomString);
58         Color color = getRandomColor();
59         Color reverse = getReverseColor(color);
60         BufferedImage bi = new BufferedImage(100, 30,
61                 BufferedImage.TYPE_INT_RGB);
62         Graphics2D g = bi.createGraphics();
63         g.setFont(new Font(Font.SANS_SERIF, Font.BOLD, 16));
64         g.setColor(color);
65         g.fillRect(0, 0, 100, 30);
66         g.setColor(reverse);
67         g.drawString(radomString, 5, 20);
68         for (int i = 0, n = random.nextInt(100); i < n; i++) {
69             g.drawRect(random.nextInt(100), random.nextInt(30), 1, 1);
70         }
71         ServletOutputStream out = response.getOutputStream();
72         JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
73         encoder.encode(bi);
74         out.flush();
75     }
76 }
复制代码

这个类无需自己会写,只要会用就行。关键的两行我加了红色。这两行代码是将生成的验证码放入session。便于后来与用户输入的验证码进行比对,从而判断用户输入是否正确。

静态页面简单写写就行。

复制代码
 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3     String path = request.getContextPath();
 4     String basePath = request.getScheme() + "://"
 5             + request.getServerName() + ":" + request.getServerPort()
 6             + path + "/";
 7 %>
 8 
 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
10 <html>
11     <head>
12             <script type="text/javascript" src="js/jquery-1.6.js"></script>
13             <script type="text/javascript">
14                     $(function(){
15                         $("#btn").click(function(){
16                             var code = $("#input_checkCode").val();
17                             $.post(
18                                 "checkCode",
19                                 {"input_checkCode":code},
20                                 function(data){
21                                     $("#tips").html("验证码输入成功");
22                                 }
23                             );
24                         });
25                     });
26             </script>
27     </head>
28 
29     <body>
30         <form action="checkCode">
31             验证码:
32             <input type="text" id="input_checkCode" name="input_checkCode">
33             <a href="javascript:;"
34                 onclick="document.getElementById('num').src= 'getCode?time='+(new Date()).getTime();">
35                 <img alt="验证码" src="getCode" id="num"> </a>
36             <a href="javascript:;"
37                 onclick="document.getElementById('num').src= 'getCode?time='+(new Date()).getTime();">看不清换一张</a>
38                 <br/>
39                 <input type="button" value="确定提交" id="btn">
40                 <span style="color:red;font-size:14px" id="tips"></span>
41         </form>
42     </body>
43 </html>
复制代码

关键代码加了颜色。绑定点击事件,传一个时间参数(不传的话验证码不会改变,"欺骗")。

有了请求之后需要写一个action去处理请求:

复制代码
package cn.com.leamon.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class CheckCodeAction extends HttpServlet {

    /**
     * @Fields serialVersionUID : TODO(用一句话描述这个变量表示什么)
     */
    private static final long serialVersionUID = 1653887824692213635L;

    @Override
    protected void service(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String checkCode = request.getParameter("input_checkCode");//获取用户输入的验证码
        HttpSession session = request.getSession();
        String code1 = (String) session.getAttribute("code");//获取系统生成的验证码
        System.out.println("用户输入:" + checkCode);
        System.out.println("系统生成:" + code1);
        System.out.println(checkCode.equalsIgnoreCase(code1));//不区分大小写 去验证两者是否相等
        if (checkCode.equalsIgnoreCase(code1)) {
            out.print("验证码填写正确");
        }
    }
}
复制代码

里面加了一些输出语句,方便测试。

最后是配置web.xml

复制代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <display-name></display-name>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>servlet</servlet-name>
        <servlet-class>cn.com.leamon.util.IdenCode</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>servlet</servlet-name>
        <url-pattern>/getCode</url-pattern>
    </servlet-mapping>
    
    <servlet>
        <servlet-name>servlet1</servlet-name>
        <servlet-class>cn.com.leamon.action.CheckCodeAction</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>servlet1</servlet-name>
        <url-pattern>/checkCode</url-pattern>    
    </servlet-mapping>
</web-app>
复制代码

这配置也没啥说的。基础配置。

效果图如下:

效果如上图。

输入错误的时候没有做处理,各位看官可根据自己需要处理。

此文章由 http://www.ositren.com 收集整理 ,地址为: http://www.ositren.com/htmls/69109.html