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

时间:2022-12-30 21:41:32

环境:

  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>

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

效果图如下:

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

效果如上图。

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

有什么需要指正和讨论,请联系QQ:70747053或邮箱:leamon@yeah.net