如何实现「点击验证码，验证码刷新」的效果？

在注册或者登录时，因为验证码看不清，用户会想要换一个，方便的方式，是点击验证码，自动更换。

思路很简单，只需要在后台获取的验证码输出url，加上时间即可，url变化，验证码自然会跟着刷新。

开发环境（java）

前台示例：

<span><img id="registerCaptchaImg" src="${pageContext.request.contextPath}/registerCaptcha"></span>

<script type="text/javascript">
$(document).ready(function(){
    $("#registerCaptchaImg").click(function(){
        var src="${pageContext.request.contextPath}/registerCaptcha?zz="+(new Date()).getTime();
        $("#registerCaptchaImg").attr("src",src);
    });
});
</script>

后台示例：

生成验证码的工具类。

package main.util.captcha;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.Random;

public class MyCaptcha {
    private static int width = 90;// 图片宽
    private static int height = 35;// 图片高
    private static int lineSize = 18;// 干扰线数量

    private static Random random = new Random();

    private static final String[] characters = { "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" };

    /**
     * 产生随机字符串，四个字
     * 
     * @return
     */
    public static String createRandomStr() {
        String str = null;
        int length = characters.length;
        str = characters[random.nextInt(length)]
                + characters[random.nextInt(length)]
                + characters[random.nextInt(length)]
                + characters[random.nextInt(length)];
        return str;
    }

    /*
     * 产生随机颜色
     */
    private static Color getRandColor(int fc, int bc) {
        if (fc > 255)
            fc = 255;
        if (bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc - 16);
        int g = fc + random.nextInt(bc - fc - 14);
        int b = fc + random.nextInt(bc - fc - 18);
        return new Color(r, g, b);
    }

    public static BufferedImage getBufferedImage(String randomString) {

        // BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
        BufferedImage image = new BufferedImage(width, height,
                BufferedImage.TYPE_INT_BGR);
        Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作
        g.fillRect(0, 0, width, height);
        g.setFont(new Font("Times New Roman", 0, 22));
        g.setColor(getRandColor(110, 133));
        // 绘制干扰线
        for (int i = 0; i <= lineSize; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(13);
            int yl = random.nextInt(15);
            g.drawLine(x, y, x + xl, y + yl);
        }
        // 绘制随机字符

        g.setColor(new Color(75, 85, 94));
        g.drawString(randomString, 10, 25);
        g.dispose();

        return image;
    }

}

生成验证码图片的servlet。

package main.control.client;

import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import main.util.MyCalendar;
import main.util.captcha.MyCaptcha;

/**
 * Servlet implementation class ClientPostCaptchaServlet
 */
@WebServlet("/registerCaptcha")
public class ClientRegisterCaptchaServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ClientRegisterCaptchaServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("image/gif");

        ServletOutputStream responseOutputStream = response.getOutputStream();
        String captchaStr = MyCaptcha.createRandomStr();
        request.getSession().setAttribute("clientRegisterCaptcha", captchaStr);
        request.getSession().setAttribute("clientRegisterCaptcha_begain_time",
                Long.valueOf(MyCalendar.getCalendar().getTimeInMillis()));
        BufferedImage image = MyCaptcha.getBufferedImage(captchaStr);
        ImageIO.write(image, "JPEG", responseOutputStream);
        responseOutputStream.flush();
        responseOutputStream.close();

    }

}

//clientRegisterCaptcha_begain_time是验证码超时的参数，不用理会。