这是一个简单的登录页面，里面必须通过验证码通过之后才能够进入页面
创建一个servlet（验证码的）
package qcby.util;
import java.io.IOException;
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 cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;
/**
* Servlet implementation class Test
*/
@WebServlet("/CaptchaServlet")
public class CaptchaServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CaptchaServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//定义图形验证码的长、宽、验证码字符数、干扰元素个数
CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);
System.out.println(captcha.getCode());
HttpSession session = request.getSession();
session.setAttribute("captchaVal", captcha.getCode());
//输出到浏览器上
captcha.write(response.getOutputStream());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
在之前创建过的js中实现它
$(".btn").on("click",function(){
var account = $(".account").val().trim()
var password = $(".password").val().trim()
var captcha = $(".captcha").val().trim()
$.ajax({
url:"Studentlogin",
type:"get",
data:{
account,
password,
captcha
},
success:function(value){
alert(value)
if(value=="登录成功"){
location.href="student.html"
}
if(value=="验证码错误"){
$("img").click()
$(".captcha").val("")
}
}
})
})在html中也加入相关内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/login.js" defer></script>
</head>
<body>
<div>
账号：<input type='text' class='account'><br>
密码：<input type='text' class='password'><br>
验证码:<input type='text' class='captcha'><img src="CaptchaServlet" width="100" onclick="this.src=this.src+'?'"><br>
<input type='button' value='登录' class='btn'>
</div>
</body>
</html><img src="CaptchaServlet" width="100" οnclick="this.src=this.src+'?'">
这里使调整图片的大小和验证码的来源，以及点击验证码的图片就可以刷新，避免看不清验证码无法输入的问题