<div class="controls"> <div class="input-icon left"> <i class="icon-lock"></i> <input class="m-wrap placeholder-no-fix" style="width: 175px;" type="text" placeholder="验证码" name="checkCode"/> <img src="{{ URL('captcha/1') }}" id="checkCode" οnclick="reloadcode(this)"> </div> </div>
<script language="javascript" >
function reloadcode(obj) {
obj.src = "{{ URL('captcha/1') }}"+Math.random();
//这里必须加入随机数不然地址相同会重新加载
}
</script>
由于浏览器会对同一 url 的图像进行缓存,向减少服务器端的请求次数,提高浏览性能,
利用附加一个随机数,来避免客户端浏览器使用缓存。让每次点击刷新验证码的时候请求的 URL 路径都不同,告诉浏览器上个图片已经失效了,需要重新向服务器上请求新的图片信息。
因为如果每次都是请求同一个页面,此时客户端浏览器会调用缓存中的页面
而如果你每次都附加一个不同随机数给url,那么客户端会以为是新的页面,从而会想服务器请求,这样才能实现每次点击都会刷新验证码的效果