无刷新面页的验证码

最新推荐文章于 2021-05-14 22:15:53 发布

cowmich

最新推荐文章于 2021-05-14 22:15:53 发布

阅读量319

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cowmich/article/details/8123322

本文介绍了一种使用JSP技术生成包含随机字符的验证码图片的方法，并通过登录页面进行用户输入验证，最后在检测页面判断输入是否正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生成图片的JSP文件：img.jsp

<%@ page autoFlush="false" import="java.util.*,java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %>

<%
//set Chinese Char
//Cody by ;
//homepage:jiarry.126.com
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset=GBK");
%>
<%
String chose="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

char display[]={'0',' ','0',' ','0',' ','0'},ran[]={'0','0','0','0'},temp;

Random rand=new Random();

for(int i=0;i<4;i++)
{

temp=chose.charAt(rand.nextInt(chose.length()));

display[i*2]=temp;

ran[i]=temp;
}

String random=String.valueOf(display);

session.setAttribute("random",String.valueOf(ran));
%>
<%

         out.clear();
         response.setContentType("image/jpeg");
         response.addHeader("pragma","NO-cache");
         response.addHeader("Cache-Control","no-cache");
         response.addDateHeader("Expries",0);
         int width=80, height=30;
         BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
         Graphics g = image.getGraphics();
         //以下填充背景颜色
         g.setColor(Color.yellow);
         g.fillRect(0, 0, width, height);
        //设置字体颜色
         g.setColor(Color.blue);
         Font font=new Font("Arial",Font.PLAIN,20);
         g.setFont(font);
         //g.drawString(random,5,14);
         g.drawString(random,5,20);
         g.dispose();
         ServletOutputStream outStream = response.getOutputStream();
         JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(outStream);
         encoder.encode(image);
         outStream.close();
    %>

登录面页：login.jsp

<%@ page contentType="text/html;charset=gb2312" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>认证码输入页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
</head>
<body>
<form method=post action="check.jsp">
<table>
<tr>
<td align=left>系统产生的认证码：</td>
<td><img border=0 src="img.jsp" id="code"></td>
</tr>
<tr>
<td align=left>输入上面的认证码：</td>
<td><input type=text name=rand maxlength=4 value=""></td>
<td>
<script type="text/javascript">
function show(o){
//重载验证码
var timenow = new Date().getTime();
o.src="img.jsp?d="+timenow;
//超时执行;
setTimeout(function(){
o.src="img.jsp?d="+timenow;
}
,20);

}

</script>

检测页面：check.jsp

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<title>认证码验证页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
</head>

<body>
<%
String rand = (String)session.getAttribute("random");
String input = request.getParameter("rand");
%>
系统产生的认证码为： <%= rand %><br>
您输入的认证码为： <%= input %><br>
<br>
<%
if (rand.equals(input)) {
%>
<font color=green>输入相同，认证成功！</font>
<%
} else {
%>
<font color=red>输入不同，认证失败！</font>
<%
}
%>
</body>
</html>