实现效果
点击看不清,换一张图片,会换一张图片
实现原理:
继承HttpServlet使用CaptchaUtil.createCircleCaptcha()方法
注意:
http://localhost:8080/jspday05/gc?i=1
这个i是可以变换的,没变一次,图片改变一次
html页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
//下面这个是获取绝对路径的意思,用的jsp
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<head>
<title>Title</title>
</head>
<body>
<div>
<table border="0" cellspacing="5" cellpadding="5" >
<tr>
<td> <div id="checkCode" class="code" ></div></td>
<td> <img id="im" src="http://localhost:8080/jspday05/gc"> <a id="kanbuq" href="javascript:changeImg();">看不清,换一张</a> </div></span></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text" id="inputCode" style="float:left;" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick="validateCode()" value="确定" /></td>
</tr>
</table>
</div>
//引入jquery需要的js
<script src="js/jquery-3.5.0.min.js" charset="utf-8"></script>
<script>
var i=0
/*改变验证码的图片*/
function changeImg() {
//触发事件
$("#im").attr("src","http://localhost:8080/jspday05/gc?i="+i);
i++;
}
function validateCode(){
$.ajax({
type:"get",
//设置请求的url
url:"<%=basePath%>tt",
//设置返回值类型
dataType:"text",
//发送数据(数据是以键值对的形式存在)
data:{//在这里name和age都是字符串,默认的键都是字符串
code:$("#inputCode").val()
},
//成功的回调函数
success:function (info) {
alert(info);
},
//失败的回调函数
error:function (info) {
alert(info);
}
})
}
</script>
</body>
</html>
引入工具包创建这个验证码
使用hutool-all-4.6.1.jar这个工具包
import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;
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;
import java.io.IOException;
@WebServlet("/gc")
public class CreateCapact extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(110, 40, 4, 10);
ServletOutputStream sos = resp.getOutputStream();
captcha.write(sos);
String code = captcha.getCode();
System.out.println(code);
req.getSession().setAttribute("code",code);
sos.flush();
sos.close();
}
}
测试效果类
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/tt")
public class TestAjax extends HttpServlet {
//在ajax的请求内,一定不要转发和重定向
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("进来了");
resp.setContentType("text/html; charset=UTF-8");
//接受ajax传过来的数据
String code9 = req.getParameter("code");
System.out.println(code9);
Object code1 = req.getSession().getAttribute("code");
String code2 =(String)code1;
PrintWriter pw = resp.getWriter();
if (code9.equals(code2)){
pw.println("验证码正确");
System.out.println("验证码正确");
}else {
System.out.println("验证码失败");
pw.println("验证码错误");
}
}
}