效果展示:
代码展示:
项目结构:
img.jsp:
生成一个验证码的图片,然后把正确的值存放再session中,方便以后验证对比
<%@ page import="java.awt.*" %>
<%@ page import="java.util.Random" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="javax.imageio.ImageIO" %>
<%@ page import="static java.awt.Font.BOLD" %>
<%@ page contentType="image/jpeg;charset=UTF-8" language="java" %>
<%!
//随机生成颜色
public Color getcolor(){
Random ran=new Random();
int r=ran.nextInt(256);
int g=ran.nextInt(256);
int b=ran.nextInt(256);
return new Color( r,g,b ); //rgb每一个的取值是0-255
}
//产生随机数字
public String getnu(){
//0-8999 1000-9999
int ran =(int)(Math.random()*9000)+1000;
return String.valueOf( ran );
}
%>
<%
//禁止缓存
response.setHeader("pragma","no-cache");
response.setHeader( "Cache-Control","no-cache" );
response.setHeader( "Expires","0" );
//绘制验证码
BufferedImage bufferedImage=new BufferedImage( 80,30, BufferedImage.TYPE_INT_RGB);
//画笔
Graphics graphics=bufferedImage.getGraphics();
graphics.fillRect( 0,0,80,30 );
//绘制干扰线条
for (int i=0;i<60;i++){
Random ran=new Random( );
int xBegin=ran.nextInt(80); //产生小于80的随机整数
int yBegin=ran.nextInt(30);
int xEnd=ran.nextInt(xBegin+10);
int yEnd=ran.nextInt(yBegin+10);
graphics.setColor( getcolor() );
//绘制线条
graphics.drawLine( xBegin,yBegin,xEnd,yEnd );
}
graphics.setFont( new Font( "seif",BOLD,20 ) );
//绘制验证码
graphics.setColor( Color.black );
String checkCode=getnu();
StringBuffer sb=new StringBuffer( );
for(int i=0;i<checkCode.length();i++){
sb.append( checkCode.charAt( i )+""); //验证码的每一个数字
}
//绘制验证码
graphics.drawString( sb.toString(),15,20 );
//将验证码真实值保存在session中,供使用时比较真实性
session.setAttribute( "CKECKCODE",checkCode );
//真实的产生图片
ImageIO.write(bufferedImage,"jpeg",response.getOutputStream());
//清理操作:
out.clear();
out=pageContext.pushBody(); //<input type="image" src="xxx">
%>
index.jsp:
前端展示页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script type="text/javascript" src="jquery-3.5.0.js">
</script>
<script type="text/javascript">
function reloadCheckImg(){
// 强制刷新
$("img").attr("src","img.jsp?t="+(new Date().getTime()));
}
$(document).ready(function () {
$("#checkcodeId").blur(function () {
var $checkcode=$("#checkcodeId").val();
//校验:文本框输入的值发送到服务端
//服务端: 获取文本框的值,和真实验证码图片的值对比,并返回验证结果
$.post(
"checkCodeServlet",
"checkcode="+$checkcode,
function (result) {//图片地址
var resultHtml=$("<img src='"+result+"'height='15'width='15px'>")
$("#tip").html();
}
)
})
})
</script>
<title>验证码</title>
</head>
<%--验证码--%>
验证码
<input type="text" name="checkcode" id="checkcodeId" size="4">
<a href="javascript:reloadCheckImg();">
<img src="img.jsp" />
</a>
<span id="tip"></span>
</body>
</html>
checkCodeServlet.java:
实现验证码的比较并且返回结果
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/checkCodeServlet")
public class checkCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String resultTip="imags/error.jpg";
//用户输入的验证码的值
String checkcodeClient=request.getParameter( "checkcode" );
//真实的验证码值
String checkcodeServer=(String) request.getSession().getAttribute("CKECKCODE");
if(checkcodeServer.equals( checkcodeClient )){
resultTip= "imags/right.jpg";
}
response.setContentType( "text/html;charset=UFT-8" );
PrintWriter writer=response.getWriter();
writer.write( resultTip );
writer.flush(); //刷新
writer.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost( request,response );
}
}