JAVAWEB中的Reponse动态生成验证码输出到浏览器中的大致逻辑以及点击切换验证码

最新推荐文章于 2022-09-19 07:15:00 发布

添油加醋哎

最新推荐文章于 2022-09-19 07:15:00 发布

阅读量150

点赞数 1

分类专栏： JAVA_WEB 文章标签： servlet java

本文链接：https://blog.csdn.net/qq_45488981/article/details/113784987

版权

JAVA_WEB 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

该博客记录了一段使用Java Servlet生成随机验证码的代码，并在前端通过JavaScript实现点击图片或链接刷新验证码的功能，以防止浏览器缓存。代码包括了验证码图片的绘制、颜色填充、干扰线添加等步骤，以及前端JavaScript事件监听和URL参数添加以解决缓存问题。

摘要由CSDN通过智能技术生成

多说无益，直接上代码

package Request;

import javax.imageio.ImageIO;
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.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@WebServlet("/responseDemo12")
public class ResponseDemo12 extends HttpServlet {
    int width = 100;
    int height = 50;

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        1、创建一对象，在内存中画图（验证码的图片对象）
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//        2、美化图片
//        2.1、填充背景色
        Graphics g =  image.getGraphics();
        g.setColor(Color.pink);
        g.fillRect(0,0,width,height);
//        2.2、话边框
        g.setColor(Color.blue);
        g.drawRect(0,0,width-1,height-1);

//        2.3  写验证码
        String str = "abcdefghijklmopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
//        创建一个随机类
        Random random = new Random();

//        获取字符
        int x = 10;
        for(int i=0;i<4;i++) {
            int index = random.nextInt(str.length());
            String ch = str.charAt(index)+"";
            g.drawString(ch,width/5*(i+1),height/2);
            x+=5;
        }
//        2.4画干扰线
        for(int i=0;i<10;i++) {
            int point1 = random.nextInt(width);
            int point2 = random.nextInt(width);
            int point3 = random.nextInt(width);
            int point4 = random.nextInt(width);

            g.setColor(Color.green);
            g.drawLine(point1,point2,point3,point4);
        }
        //        3、将图片输出到页面展示
        ImageIO.write(image, "jpg", resp.getOutputStream());
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }
}

点击切换，还是直接上代码

**注意解决浏览器动态缓存图片的问题**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <script>
    /*

               点击超链接或者图片,换一张
        1、给超连接和图片绑定单击事件
        2、重新设置图片的src属性值
     */
        window.onload = function () {
        //1、获取图片而对象
          var img =   document.getElementById("checkCode");
        //2、给image绑定单击事
            img.onclick = function () {
                //加事件戳
                var date = new Date().getTime();
                img.src="/responseDemo12?"+date; //解决浏览本地缓存，图片不切换
            }

            var change  = document.getElementById("change");
            change.onclick = function () {
                var date = new Date().getTime();
                img.src="/responseDemo12?"+date;
            }
        }

    </script>
<body>
    <img id="checkCode" src="/responseDemo12" />
    <a id="change" href="">看不清换一张</a>
</body>
</html>

效果图
在这里插入图片描述

此代码根据视频所学进行记录，只了解大致逻辑，具体美观代码可上网查看

禁止转载，若有侵权，将进行追究

若侵权他人，请联系我，进行删除，谢谢

来自一个写代码的小哥哥

若有错误，请联系我，进行修改

写代码，挣钱，努力，挣钱，run，run，run

添油加醋哎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVAWEB中的Reponse动态生成验证码输出到浏览器中的大致逻辑以及点击切换验证码

多说无益，直接上代码package Request;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.Ht
复制链接

扫一扫

专栏目录