HTML点击刷新验证码

HTML点击刷新验证码

之前的代码

<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";
}

看着代码没有任何问题，但是就是没有效果。

原来是浏览器缓存的原因，应为在页面加载的时候验证码图片已经存在，当你再次请求同一个地方的时候就会从缓存中加载。

不对啊，浏览器我已经禁用了缓存的，肿么还去加载呢？有些懵。

image-20200916101224753.png

解决办法。在请求地址后面加上随机数，这样浏览器就会认为这是不一样的请求的，达到点击刷新验证码的目的。

<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();
}

dasddsa-1600222557419.gif