Question

我在jQuery AJAX中使用JavaScript，我的脚本如下;

$(document).ready( function() {
$('#process').click(function() {
  var $process = $(this);
  var $message = $process.parent().parent().next().children('td');
  $message.text("Processing...");
  $.ajax({
    type: 'POST',
    url: 'myajaxfile.php',
    data: 'data1=flename1&data2=2&data3=mix',
    dataType: 'json',
    cache: false,
    success: function(result) {
      var result1 = result[0];
      var result2 = result[1];
      if(result1 == "true"){
        alert("true");
        $('#preview').css({ 'background-image':'url(' + result2 + ')' });
        $message.text("");
        return(false);
      }else{
        alert("false");
        $message.html("Error !<br>Error !");
      }
    },
  });
});
});

这会将一些数据发送到我的ajax文件，并更改ID为preview的div的背景图片。一切都很好。但仍有一些令人困惑的问题。 ajax文件首先根据数据发送制作一些缩略图图像，其中data1 = filename1，data1 = filename2等等。如果制作缩略图，它将返回json_encoded array result1 = true并且result2 = imagename。 imagename变量包含图像的完整路径images/img1.jpg。但预览令人头疼。假设，如果它使用data1=flename1发送请求，它将创建缩略图img1.jpg并正确显示。然后我将data1更改为data2，刷新页面并发送请求。但显示的图像是上一张图像。我检查了目录并发现每次请求，在目录中创建相应的正确图像文件。但问题出在显示器上。此外，如果我在刷新页面后重复Ajax请求2次或更多次，则会显示正确的图像。这是因为相同的图像名称。但我别无选择。我正在使用Firefox。

我该如何解决这个问题？

Answer 1

听起来你有一个缓存问题。第一个图像是从服务器获取的，但是当没有路径改变的图像时，浏览器会将图像从其缓存中拉出来，即使服务器有新的图像，您也会看到旧图像。

我发现缓存清除的最简单，最可靠的方法是在CGI参数中附加一个随机数到图像的URL：

$('#preview').css({
    'background-image': 'url(' + result2 + '?cb=' + Math.random() + ')'
});

您可能需要调整服务器配置以忽略?cb，但它应该自行完成。

您还可以尝试使用服务器上的Cache-Control HTTP标头来播放相关图片。设定：

Cache-Control: no-cache

应该这样做，但缓存破坏URL的kludge更加简单。包括临时图像的Cache-Control标题仍然是一个好主意。

Answer 2

您是否尝试过检查您的ajax调用返回的URL是什么？也许您的服务器端脚本不正确：

var result1 = result[0];       
var result2 = result[1];     

alert(result2); // should help you determine if the script is returning the correct image path

if(result1 == "true"){
...

使用jQuery AJAX进行图像显示

2 个答案: