JavaWeb验证码的生成与判断

最新推荐文章于 2023-10-07 15:48:26 发布

漠尘01

最新推荐文章于 2023-10-07 15:48:26 发布

阅读量444

点赞数

文章标签： java js ajax

本文链接：https://blog.csdn.net/YangXin94/article/details/112972090

版权

验证码的生成

首先需要hutool.jar插件可以去官网下载

hutool官网

先写出一个路径，用于存储验证码图片

package cn.hxl.servlet;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;

import javax.servlet.annotation.WebServlet;
import java.io.IOException;

/**
 * @author Admin
 */
@WebServlet("/getCode")
public class GetCodeServlet extends javax.servlet.http.HttpServlet {
    @Override
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doGet(request, response);
    }

    @Override
    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        // 新建一个captcha验证码图片
        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);
        // 获取图片中的验证码内容
        String code = captcha.getCode();
        // 把验证码存在session中
        request.getSession().setAttribute("code", code);
        // 将图片验证码发送给前端
        captcha.write(response.getOutputStream());

    }
}

然后写jsp页面

<%--
  Created by IntelliJ IDEA.
  User: Admin
  Date: 2021/1/21
  Time: 20:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="text" placeholder="请输入验证码" id="code" name="code"/>
<img src="getCode"><br><br>
<button id="btn">确定</button>

<script>
    $("#btn").click(function(){
        $.ajax({
            url:'/login',
            type:'get',
            data: {"code": $("#code").val()},
            success:function(data){
                alert(data);
            }
        });
    });

</script>
</body>
</html>

这里用到了ajax 用于验证码的比较

新建一个servlet 然后写入一下的来判断

package cn.hxl.servlet;

import cn.hutool.json.JSONUtil;

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;

/**
 * @author Admin
 */
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取用户请求的参数  用户名 密码 验证码
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        // 验证验证码 查看验证码输入的是否正确
        String code = request.getParameter("code");
        String sessionCode = (String) request.getSession().getAttribute("code"); // 获取存储在session里的验证码
        if(code.equals(sessionCode)){
            response.getWriter().println("正确");
        }else{
            response.getWriter().println("错误");
        }
    }
}

效果展示

在这里插入图片描述

点击切换

在js里面添加以下代码然后在img中添加一个onclick点击事件就可以实现点击切换验证码了

<img src="getCode" id="img" onclick="getCode()">
function getCode(code){
        $("#img").attr("src", "/getCode?date=" + new Date().getTime());
    }

在这里插入图片描述
然后就完成了！

漠尘01

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb验证码的生成与判断

验证码的生成首先需要hutool.jar插件可以去官网下载hutool官网先写出一个路径，用于存储验证码图片package cn.hxl.servlet;import cn.hutool.captcha.CaptchaUtil;import cn.hutool.captcha.CircleCaptcha;import javax.servlet.annotation.WebServlet;import java.io.IOException;/** * @author Adm
复制链接

扫一扫