
之前的代码
<div class="col-xs-6">
验证码:<input type="text" name="verification" placeholder="不区分大小写"/>
<a href="javascript:changeImg();" rel="external nofollow" title="点击更换验证码">
<img id="img" src="/getVerify" alt="验证码"/>
</a>
</div>
function changeImg() {
document.getElementById("img").src = "/getVerify";
}看着代码没有任何问题,但是就是没有效果。
原来是浏览器缓存的原因,应为在页面加载的时候验证码图片已经存在,当你再次请求同一个地方的时候就会从缓存中加载。
不对啊,浏览器我已经禁用了缓存的,肿么还去加载呢?有些懵。

解决办法。在请求地址后面加上随机数,这样浏览器就会认为这是不一样的请求的,达到点击刷新验证码的目的。
<div class="col-xs-6">
验证码:<input type="text" name="verification" placeholder="不区分大小写"/>
<a href="javascript:changeImg();" rel="external nofollow" title="点击更换验证码">
<img id="img" src="/getVerify" alt="验证码"/>
</a>
</div>
function changeImg() {
document.getElementById("img").src = "/getVerify?r=" + Math.random();
}
本文探讨了浏览器缓存导致验证码无法刷新的问题,即使禁用了缓存,仍然会从缓存中加载相同的验证码图片。解决方案是在请求URL后添加随机数,使每次请求都视为新的请求,从而实现验证码的正确刷新。

被折叠的 条评论
为什么被折叠?



