创建了新图像，但显示的是旧图像JS(AJAX）

New image is created but the old one is shown JS(AJAX)

本文关键字：图像 AJAX JS 显示 新图像 创建      更新时间：2023-09-26

我有Ajax函数

function getOutput() 
{
  var ajax = getRequest();
  document.getElementById('output').innerHTML = "<br/>";
  ajax.onreadystatechange = function()
  {
      if(ajax.readyState == 4)
      {
          document.getElementById('output').innerHTML = ajax.responseText;
      }
  }
  document.getElementById('output').innerHTML = "<br/><img src=img/ajax-loader.gif><br/><br/>";
  ajax.open("GET", "graph_2.php", true);
  ajax.send(null);
}

HTML

<form >
  <input type="image" src=img/button.jpg class=mygtukas 
  onclick='getOutput(); return false;'>
</form>
<span id=output></span>

它调用PHP代码来创建一个图。第一次它工作得很好，但当用户更改图形参数并再次按下按钮时（页面不会重新加载），它会显示旧图形，甚至在服务器中创建并保存了新图形。

这可能是因为浏览器的缓存。浏览器将您计算机上的图像副本保存在临时目录中。由于此映像与上一版本具有相同的名称和位置，因此它从磁盘加载映像，从而更快地加载分配（无需再次下载）

解决方案非常简单。将imagename更改为某个变量。一个广泛使用的技巧是添加一个随机值：

是否返回image.jpg而不是image.jpg_randomString此处

随机字符串可以基于以下几点。在php中，我喜欢使用uniqid()，因为它总是唯一的（除非有人刷新速度超过1毫秒）。另一种方法是（如下面的评论中所建议的）时间戳。在php中，time()就足够了。

如果你想要一个javascript解决方案，你可以在image.src = image.src +'?'+ Math.random() 的所有行中做一些事情

我突然想到，这可能是AJAX调用本身。您可以在AJAX调用中使用上面所述的javascript建议，使每个调用都具有唯一的

Math.random（）文档

这是由于缓存问题，您可以像jquery cache:false处理它一样，通过向您的uri添加一个随机值来处理它。

ajax.open("GET", "graph_2.php?_=" + Math.random() , true);
相关文章：