jsp+javascript製作驗證碼

snow0613發表於2007-10-30
JSJavaScript
可以在不重新整理整個頁面的情況下重新整理驗證碼。
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.上論壇求助，只要你問的問題不是很幼稚，論壇上的大佬都會幫你解決的，當然不要忘記結帳。

相關文章