JAVA ---簡単な検証コードの記述| js + htmlは検証コードの変更を実現します|はっきりと見えませんか？1つ変更する

簡単な検証コードを書く方法は？

@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
            int width = 100;
            int height = 50;

        //创建图片对象
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);

        //美化图片
        //1.填充背景色
        Graphics g = image.getGraphics(); //创建画笔对象
        g.setColor(Color.PINK);  //设置画笔颜色
        g.fillRect(0,0,width,height);  //从（0,0）点开始

        //2.画边框
        g.setColor(Color.BLACK);
        g.drawRect(0,0,width-1,height-1);

        //定义字符库
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqlstuvwxyz1234567890" ;

        //定义角标（即选中哪个字符）
        Random random = new Random();


        //选四个字符
        for(int i = 0; i < 4; i ++){
    
    
            int index = random.nextInt(str.length());
            char ch = str.charAt(index);  //charAt通过角标获取字符
            g.drawString(ch+"",width/5*(i+1),height/2);
        }

        //画干扰线
        g.setColor(Color.cyan);

        for(int x =0; x< 11; x++){
    
    
            int x1 = random.nextInt(width);
            int x2 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int y2 = random.nextInt(height);
            g.drawLine(x1,y1,x2,y2);
        }



        //输出图片到页面
        ImageIO.write(image,"jpg",response.getOutputStream());
    }

書かれた確認コードの使い方は？

要件：ランダムに生成された確認コードを置き換えるには、ページの確認コードの画像またはハイパーリンクをクリックします

環境：html + js

コード：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //给超链接和图片绑定单击事件,并且重新设定图片src的值
        function reImg() {
     
     
            var img = document.getElementById("checkcode");
            //2.绑定单击事件
            //加时间戳
            var date = new Date().getTime();
            img.src = "/day15/CheckCodeServlet?" + date;
        }
    </script>
</head>
<body>
    <img οnclick="reImg()" id= "checkcode" src = "/day15/CheckCodeServlet" />
    <a href = "#" οnclick="reImg()"> 看不清?点此处换一张</a>
</body>
</html>

ヒント：
1。タイムスタンプの役割：ブラウザには自動キャッシュの機能があるため、タイムスタンプがないと、imgのsrc属性を変更できません。毎回異なる必要がある属性を追加すると、時間が最適になります。乱数プロパティの使用も繰り返される可能性があるため、タイムスタンプを使用することをお勧めします。
2.ハイパーリンクのhref属性が最初に ""（空）でない理由は、emptyを使用するとページが更新され、以前に入力されたデータが消えてしまうためです。

                                        感谢收阅

JAVA ---簡単な検証コードの記述| js + htmlは検証コードの変更を実現します|はっきりと見えませんか？1つ変更する

おすすめ