求助:关于名称相同的图片连接3秒内不能刷新最新图片,而是被浏览器缓存的问题。
本帖最后由 sun9763 于 2013-10-13 11:05:51 编辑
今天做到一个功能,在后台管理系统中,用户详情页面里有给用户生成二维码图片的功能,进入详情页的时候,如果用户的二维码存在,就显示出来。如下:
<img id="InviteImage" src="<%=contextPath %>/uploadfile/mem/2dcode/invite/${idcontacts.id}.jpg"/>
<input name="button3" type="button" id="button3" onclick="createInviteMatrix('<%=contextPath%>','${idcontacts.id }');"value="生成会员二维码" />
当button3点击的时候,会用ajax的方式请求到后台,为会员生成二维码图片,二维码以会员的Id命名,路径是固定的,成功返回后就在InviteImage这个img标签上显示出来。代码如下:
Action后台代码:
@RequestMapping
public@ResponseBody String createUserInviteMatrix(Integer id){
if (id==null || id<=0) {
return "参数错误";
}
boolean b=createInviteMatrix(id);
if (b) {
return "success";
}else {
return "faild";
}
}
Ajax请求的代码:
function createInviteMatrix(path,id){
$.ajax({
type : "POST",
url : path+"manage/info/idcontacts/createUserInviteMatrix.do",
data : {id:id},
success : function(msg) {
if(msg=="success"){
alert("生成成功");
url=path+"uploadfile/mem/2dcode/invite/"+id+".jpg?"+Math.random();
$("#InviteImage").attr("src",url);
}else{
alert("生成失败!");
}
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("XMLHttpRequest"+XMLHttpRequest+"_textStatus"+textStatus+"_errorThrown"+errorThrown);
}
});
}
问题来了,因为是用ajax方式提交,所以页面是没有刷新的,当成功生成二维码并返回的时候,给img标签设置图片地址始终没反应,比如会员二维码不存在的时候是找不到图片的,就是显示的一个红叉叉,但生成了图片之后就应该能找到了,但$("#InviteImage").attr("src",url);还是没反应,我甚至怀疑是后台没有生成完图片就返回了,导致找不到图片。我尝试了很多次,终于找到了原因所在,确实跟后台没有关系,因为img标签本身的图片连接就是图片路径加会员Id,赋值的时候同样是赋的这个,所以被浏览器缓存了,我赋值时候又在地址后面加了一个随机数,同样还是不行。
然后我在成功返回的时候写了一个setTimeOut隔3秒才去调用$("#InviteImage").attr("src",url);,结果果然成功了,图片换过来了。我又尝试着改1秒,2秒甚至是2.5秒,都没用,必须是3秒以上,我给JSP页面加了上禁止缓存的标签,依旧没用,三秒之内这个连接似乎被浏览器吃定了,不管你到底有没有设置缓存不缓存,3秒之内,似乎两次相同的请求连接都被强制缓存了,相同的连接不管怎么给img标签赋值,都被它给拦下了,怎么弄都没有反应。然后我又尝试去掉定时器,直接调用$("#InviteImage").attr("src",url);但是是在进入页面的时候不去点按钮,等待3秒后再去点,果然又成功了。这也更加证明了我的想法。似乎必须要在3秒之后才行。各位前辈,这到底是什么原因呢?虽然跟老大说明了情况,但老大还是要我解决,各位前辈有知道原因和解决办法的,麻烦告诉我一声啊,感激不尽!
------解决方案--------------------是不是缓存新鲜度的问题?把这个数值改的小于三秒即可