jquery + servlet + jsp 实现验证码
功能 ： 看不清的时候可以从新刷新验证码而不重新刷新界面
servlet 代码
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ValidCode
*/
@WebServlet("/validcode")
public class ValidCode extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest req,HttpServletResponse resp) throws ServletException,IOException{
//创建一张图片
//单位：像素
BufferedImage image = new BufferedImage(200,100,BufferedImage.TYPE_INT_RGB);
//向画板上画内容之前必须先设置画笔
Graphics2D gra = image.createGraphics();
gra.setColor(Color.WHITE);
//将画板填充为白色
gra.fillRect(0, 0, 200, 100);
List<Integer> randList = new ArrayList<Integer>();
Random random = new Random();
for(int i=0;i<4;i++)
{
randList.add(random.nextInt(10));
}
Color[] colors = new Color[] {Color.RED,Color.YELLOW,Color.GRAY,Color.GREEN };
//设置字体
gra.setFont(new Font("宋体",Font.BOLD|Font.ITALIC,30));
for(int i=0;i < randList.size() ; i++)
{
gra.setColor(colors[random.nextInt(colors.length)]);
gra.drawString(randList.get(i)+"", i*40, 70+(random.nextInt(21)-10));
}
for(int i=0;i < 2 ; i++)
{
gra.setColor(colors[random.nextInt(colors.length)]);
gra.drawLine(0, random.nextInt(101), 200, random.nextInt(101));
}
ServletOutputStream outputStream = resp.getOutputStream();
//工具类
ImageIO.write(image, "jpg", outputStream);
}
}
index.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>Insert title here</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
//浏览器带有缓存功能，不会多次请求相同数据
$("img").attr("src","validcode?date="+new Date());
return false;
})
})
</script>
<body>
<form action="" method="post">
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="password" /><br />
验证码：<input type="text" size="1"/><img alt="" src="validcode" width="80" height="40"><a href="">看不清</a><br />
<input type="submit" name="登陆" /><input type="reset" name="重置"/>
</form>
</body>
</html>