验证码的“看不清楚，换一张”功能

假定${ctx}/images/VerificationCode.jpg为一个显示验证码的servlet

 

1、以前一直这样用

<img src="${ctx}/images/VerificationCode.jpg" alt="验证码，看不清楚，换一张" 

onclick="this.src=this.src" />

但是在服务器对图片有缓存的情况下就无效了

2、受SpringSide的启发

http://wiki.springside.org.cn/display/SpringSide3/Captcha

变化一下,变成

<img src="${ctx}/images/VerificationCode.jpg" alt="验证码，看不清楚，换一张" 

onclick="$(this).hide().attr('src',this.src + '?' + Math.floor(Math.random()*100)).fadeIn();" />

但是这个要使用jQuery插件，主要是加了个随机数，防缓存．但是要使用到jQuery插件．

3、朴素一点，去掉jQuery

<img src="${ctx}/images/VerificationCode.jpg" alt="验证码，看不清楚，换一张" 

onclick="this.src = this.src + '?' + Math.floor(Math.random()*100))" />

4、更简单一点

<img src="${ctx}/images/VerificationCode.jpg" alt="验证码，看不清楚，换一张" 

onclick="this.src = this.src + '?' + new Date().getTime();" />

原理都是一样的，加随机数(随机数，或时间戳)，去缓存。