【需求 在html页面中每刷新一次出现的验证码不同】
1:一个显示验证码的页面
2:一个servlet处理验证的生成
【1: html页面checkcode.html】
该页面放在项目的(WebContent)根目录下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeImage(){
var date = new Date();
var img = document.getElementById("img").src="/servlet/request4?"+date.getMilliseconds();
}
</script>
</head>
<body>
请输入验证码<input type="text" name="checkCode"/>
<img src="/servlet/request4" id="img" οnclick="changeImage()">
<a href="javascript:void(0)" οnclick="changeImage()">看不清图片,换一张</a>
</body>
</html>
【2: 写一个Servlet】
Request4Servlet.java
(含注释)
package com.flying.servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Request4Servlet extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 创建一个图片,图片的学名叫做画布。
// 画布必须有高和宽以及图片类型
int width = 120;// 宽
int height = 40;// 高
// 第一次参数是宽,第二个参数是高,第三个参数是指图片类型:固定
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
// 开始画图必须有画笔
Graphics g = image.getGraphics();
// 修改背景颜色
g.setColor(Color.white);
// 将背景颜色填充到一个矩形中
g.fillRect(0, 0, width, height);
// 设置边框颜色
g.setColor(Color.red);
// 设置边框,坐标从0开始绘制边框
g.drawRect(0, 0, width - 1, height - 1);
// 设置需要显示的字母shift+ctrl+x是大写shift+ctrl+y是小写
String data = "ABCDEFGHIJKLMNOPQISTUVWXYZabcdefghijklmnopqistuvwxyz";
Random r = new Random();
// 连续填充4个字母到图片中
for (int i = 1; i <= 4; i++) {
// 设置字母颜色
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
// 设置字母的字体,样式,大小
g.setFont(new Font("宋体", Font.BOLD, 30));
// 第一个参数是要绘制到图片上的字母,第二个参数字母所在的横坐标,第三个参数是纵坐标
g.drawString(data.charAt(r.nextInt(data.length())) + "",
10 + (i - 1) * 27, 30);
}
// 设置干扰线
for (int i = 1; i <= 10; i++) {
// 两点连成一直线,每一个点都有一个坐标x1和y1代表起点的坐标,x2和y2代表终点的坐标
g.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width),
r.nextInt(height));
// 设置线条的颜色
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
}
// 有了图片就需要将图片响应出去
// 第一个参数是图片对象,第二个参数是图片类型,第三个参数是输出方式:使用字节流
ImageIO.write(image, "jpg", response.getOutputStream());
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
web.xml中的参数如以前一样
重新启动Servlet视图中的tomcat
在浏览器中输入:http://localhost:8080/servlet/checkcode.html
就会看到验证码的效果,旁边的按钮点击一下就会切换验证码!