jsp+javascript制作验证码

最新推荐文章于 2024-07-26 20:46:33 发布

snow0613

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1.1k

点赞数

文章标签： javascript jsp random image session function

本文链接：https://blog.csdn.net/snow0613/article/details/1857981

版权

可以在不刷新整个页面的情况下刷新验证码。
validatecode.jsp:
<%@ page contentType="image/jpeg"
    import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*"
    pageEncoding="UTF-8"%>

<%!char[] code = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
            'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y',
            'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
            'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y',
            'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };%>

<%!Random rand = new Random();%>

<%!Color getRandColor(int fc, int bc) {
        if (fc > 255) {
            fc = 255;
        }
        if (bc > 255) {
            bc = 255;
        }
        int n = Math.abs(fc - bc);
        int r = fc + rand.nextInt(n);
        int g = fc + rand.nextInt(n);
        int b = fc + rand.nextInt(n);
        return new Color(r, g, b);
    }%>

<%!Color getRandColor() {
        return getRandColor(0, 255);
    }%>
<%
    // 设置页面，禁止图像缓存
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);

    int width = 80; // 图像宽度
    int height = 20; // 图像高度
    int codeCount = 4; // 验证码长度

    // 创建图像image
    BufferedImage image = new BufferedImage(width, height,
            BufferedImage.TYPE_INT_RGB);
    Graphics2D g = image.createGraphics();

    // 设置背景颜色
    g.setColor(getRandColor(216, 250));
    g.fillRect(0, 0, width, height);

    // 设置字体
    g.setFont(new Font("Times New Roman", Font.PLAIN, height - 2));

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

    // 随机生成160条干扰线
    g.setColor(getRandColor(180, 200));
    for (int i = 0; i < 160; i++) {
        int x = rand.nextInt(width);
        int y = rand.nextInt(height);
        int xl = rand.nextInt(12);
        int yl = rand.nextInt(12);
        g.drawLine(x, y, x + xl, y + yl);
    }

    // 用一个randomCode来保存验证码
    StringBuffer randomCode = new StringBuffer();

    // 随机生成验证码
    for (int i = 0; i < codeCount; i++) {
        String randStr = String.valueOf(code[rand.nextInt(62)]);
        g.setColor(getRandColor());
        g.drawString(randStr, (rand.nextFloat() + 18) * i + 5, (rand
        .nextFloat() + 3.5f) * 4);
        randomCode.append(randStr); // 将随机产生的字符合成一个字符串
    }

    // 将产生的验证码保存到session中
    session.setAttribute("validatecode", randomCode.toString());

    // 使图像生效
    g.dispose();

    // 将图像输出到页面
    ImageIO.write(image, "JPEG", response.getOutputStream());
    response.getOutputStream().close();
%>

usingvalidatecode.jsp
<body>
    <script type="text/javascript">
    function show(o){
        // 重新载入验证码
        var timenow = new Date().getTime();
        o.src="../include/validatecode.jsp?d="+timenow;
    }
</script>

验证码：<html:text property="validatecode" size="4" />
<img src="validatecode.jsp" name="rand" id="rand" />
<a href="javascript:show(document.getElementById('rand'))">看不清?</a>
</body>

结果：只要单击“看不清?”这个链接的时候就会自动刷新页面上的验证码图片而不必刷新整个页面。希望那些和我一样还属于菜鸟的人能得到帮助。

问题的提出：需求->要求单击图片或者某个链接就能实现验证码图片刷新而不需刷新整个页面。
解决过程：1.在网上找资料，在这要感谢liam168，是他那篇 AJAX+jsp无刷新验证码实例帮助我解决这个问题的。2.上论坛求助，只要你问的问题不是很幼稚，论坛上的大佬都会帮你解决的，当然不要忘记结帐。

snow0613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jsp+javascript制作验证码

可以在不刷新整个页面的情况下刷新验证码。validatecode.jsp: import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" pageEncoding="UTF-8"%> m, n, o, p, q, r, s, t, u, v, w, x
复制链接

扫一扫