Отображение изображения с использованием JQuery AJAX

Question

Я использую JavaScript с jQuery AJAX, и у меня есть скрипт, как показано ниже;

$(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-файл и меняет фоновое изображение моего div с идентификатором preview. Все работает хорошо Но все же какая-то запутанная проблема. Ajax-файл сначала создает несколько миниатюрных изображений в соответствии с отправленными данными, где data1 = имя_файла1, data1 = имя_файла2 и т. Д. И т. Д. Если создается эскиз, он возвращает 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, но он должен сделать это самостоятельно.

Вы также можете попробовать поиграть с HTTP-заголовком Cache-Control на вашем сервере для рассматриваемых изображений. Установка:

Cache-Control: no-cache

должен сделать это, но URL-адрес, убивающий кеш, более надежен. Включение заголовка Cache-Control для временных изображений все еще хорошая идея.

Answer 2

Вы пробовали проверить, какой URL-адрес возвращается вашим ajax-вызовом?Возможно, ваш серверный скрипт неверен:

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"){
...