ajax+servlet实现更换验证码

最新推荐文章于 2021-08-26 14:49:01 发布

轩成笔记

最新推荐文章于 2021-08-26 14:49:01 发布

阅读量242

点赞数

分类专栏： java基础练习文章标签： ajax js html servlet

本文链接：https://blog.csdn.net/weixin_44883971/article/details/108393591

版权

java基础练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现效果

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