点击验证码只能刷新一次

眼里要有bug

已于 2024-07-05 17:24:41 修改

阅读量375

点赞数 1

分类专栏：项目问题解决

于 2021-08-22 18:32:49 首次发布

本文链接：https://blog.csdn.net/hua_wuse/article/details/119855494

版权

java

项目问题解决专栏收录该内容

2 篇文章 0 订阅

订阅专栏

由于浏览器缓存机制，点击验证码只能刷新一次。为解决这个问题，可以通过添加不断变化的参数，如时间戳或随机数，来避免浏览器使用缓存的验证码图片。例如，将请求地址更改为http://loclhost:8080/项目名/code.jpg?x=每次都不同的值。

摘要由CSDN通过智能技术生成

点击验证码只能刷新一次

原因：浏览器为了让请求速度更快，就会把每次请求到的内容缓存到浏览器端。
浏览器第一次请求地址：http://loclhost:8080/项目名/code.jpg
服务器返回验证码图片：code.jpg=返回的图片内容
当浏览器再发一样的地址和参数的请求时，直接从缓存中找：http://loclhost:8080/项目名/code.jpg
直接从浏览器的缓存中获取原来的图片返回

由原因引出问题：
如何跳过浏览器的缓存，而发起请求给服务器获取新验证码？
缓存的名称由最后的资源名和参数组成
http://loclhost:8080/项目名/code.jpg?x=每次都不同的值

问题解决

每次都不同的值可以用时间戳或者随机数完成

代码如下

<img id="code_img"  src="code.jpg" ">

		//页面加载完成之后
        $(function () {
            //给验证码的图片，绑定单击事件
            $("#code_img").click(function (){
                this.src = "${basePath}code.jpg?d=" + new Date();
            });
        )}