JQ实现网页验证码
程序员文章站
2024-01-20 21:25:22
...
先上效果图
结构
index.jsp
<%--
Created by IntelliJ IDEA.
User: 墨予
Date: 2019/10/16
Time: 15:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script type="text/javascript" src="jquery-3.4.1.js">
</script>
<script type="text/javascript">
function reloadCheckImg(){
$("#imgs").attr("src","img.jsp?t="+(new Date().getTime()));
}
$(document).ready(function () {
//当失去焦点执行
$("#checkcode").blur(function () {
var $checkcod = $("#checkcode").val();
//ajax 请求Servlet
$.post(
"CheckCodeServlet",
"checkcode="+$checkcod,
function (result) {
var resultHtml = $("<img src='"+result+"' height='15' width='15px' />")
$("#tip").html(resultHtml);
}
);
})
})
</script>
<title>验证码</title>
</head>
<body>
验证码：
<input type="text" name="checkcode" id="checkcode" size="4"/>
<!--验证码-->
<a href="javascript:reloadCheckImg();"><img src="img.jsp" id="imgs"/></a>
<span id="tip"></span>>
</body>
</html>
Img.jsp
<%@ page import="java.awt.*" %>
<%@ page import="java.util.Random" %>
<%@ page import="java.lang.management.ManagementFactory" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="javax.imageio.ImageIO" %><%--
Created by IntelliJ IDEA.
User: 墨予
Date: 2019/10/16
Time: 15:44
To change this template use File | Settings | File Templates.
------验证码
--%>
<%@ page contentType="image/jpeg;charset=UTF-8" language="java" %>
<%-- 方法用<%! --%>
<%!
public Color getColor(){
Random ran = new Random();
int r = ran.nextInt(256);//0-255随机数
int g = ran.nextInt(256);
int b = ran.nextInt(256);
return new Color(r,g,b);// red , green , blue 0-255
}
public String getNum(){
//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 image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
//画笔
Graphics graphics = image.getGraphics();
graphics.fillRect(0,0,80,30);
//绘制干扰线条
for(int i=0;i<60;i++){
Random ran = new Random();
int xBegin = ran.nextInt(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",Font.BOLD,20));
//绘制验证码
graphics.setColor(Color.BLACK);
String checkCod= getNum();
StringBuffer sb= new StringBuffer();
for(int i =0 ;i<checkCod.length();i++){
sb.append( checkCod.charAt(i)+" ");//每个数字
}
graphics.drawString(sb.toString(),15,20);//绘制验证码
//验证码真实值保存
session.setAttribute("CHECKCODE",checkCod);
//产生图片
ImageIO.write(image,"jpeg",response.getOutputStream());
//清理
out.clear();
out= pageContext.pushBody(); //图片放入路径之中
%>CheckCodeServletpackage com.cjr;
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="imgs/wrong.jpg";
String checkcodeClient = request.getParameter("checkcode");
String checkcodeServer = (String)request.getSession().getAttribute("CHECKCODE");
if(checkcodeClient.equals(checkcodeServer)){
resultTip = "imgs/right.jpg";
//
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
writer.write(resultTip);
writer.flush();
writer.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}