servlet生成验证码和点击刷新验证码

- 日理万妓 2022-03-21 06:46 509阅读 0赞

javaweb项目，有两个文件，一个java文件，用来生成验证码并输出到servlet输出流中。一个html文件，用来写组件和点击事件，刷新验证码。

**CodeServlet.java文件**

package net.test.servlet;
    
    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(name = "CodeServlet",urlPatterns = "/code")
    public class CodeServlet extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        }
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            int width=100;
            int height=30;
            String str="qwertyuiopasdfghjklzxcbnm123456789";
            Random random = new Random();
    
            BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
            Graphics graphics = image.getGraphics();
            graphics.drawRect(0,0,100,30);
            for (int i = 0; i < 4; i++) {
                int number=random.nextInt(str.length());
                String a=str.substring(number,number+1);
                graphics.drawString(a,20*(i+1),15);
            }
    
            ImageIO.write(image,"jpg",resp.getOutputStream());
    
    
        }
    }

**login.html文件**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>验证码</title>
    </head>
    <body>
        <image id="verifycode" src="code" onclick="this.src=this.src+'?'+Math.random()" "btn.isDisable=false"></image>
        <button id="btn" onclick="document.getElementById('verifycode').click()">刷新验证码</button>
    </body>
    </html>

**运行结果：**  
![在这里插入图片描述][20190131114015450.]  
点击图片或者按钮，都能刷新验证码  
![在这里插入图片描述][20190131114031439.]

[20190131114015450.]: /images/20220321/27806cbefd164dbc895694e7fa06fe92.png
[20190131114031439.]: /images/20220321/0e8589ca0e8647cc87d94c02af126d64.png