ajax+servlet实现更换验证码

tech2024-10-27 25

实现效果

点击看不清，换一张图片，会换一张图片实现原理：继承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("验证码错误"); } } }

最新回复(0)