如何在AJAX完成缩略图更新后用jQuery重新加载图片？

你的问题核心是AJAX请求是异步执行的，当前代码在发送请求后立刻执行了图片刷新操作，这时候服务器端的缩略图还没完成更新，所以加载的还是旧图片。要解决这个问题，必须把图片刷新的逻辑放到AJAX请求成功完成的回调函数里，确保只有当服务器端完成缩略图更新后，才去重新加载图片。

方法一：修改原生XMLHttpRequest代码 #

给xhttp添加onload事件监听，在请求成功完成后再执行图片刷新：

function ajax_set_thumbnail(item_id, full_path)
{
  const xhttp = new XMLHttpRequest();
  const params = 'full_path=' + encodeURIComponent(full_path); // 编码参数避免特殊字符问题
  xhttp.open("POST", "/ajax/set_thumbnail/" + item_id + "/", true);
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  
  // 监听请求完成事件
  xhttp.onload = function() {
    if (this.status >= 200 && this.status < 300) {
      // 请求成功，刷新缩略图
      const timestamp = new Date().getTime();
      // 清除旧的timestamp，避免URL冗余
      const originalSrc = $('#thumbnail').attr('src').split('?')[0];
      $('#thumbnail').attr('src', originalSrc + '?' + timestamp );
    } else {
      console.error('更新缩略图失败');
    }
  };
  
  // 监听请求出错事件
  xhttp.onerror = function() {
    console.error('请求发生错误');
  };
  
  xhttp.send(params);
}

方法二：改用jQuery的AJAX方法（更简洁） #

既然你已经引入了jQuery，直接使用它的AJAX方法可以让代码更简洁，同时内置了回调处理：

function ajax_set_thumbnail(item_id, full_path)
{
  $.post("/ajax/set_thumbnail/" + item_id + "/", {
    full_path: full_path
  })
  .done(function() {
    // 请求成功，刷新缩略图
    const timestamp = new Date().getTime();
    const originalSrc = $('#thumbnail').attr('src').split('?')[0];
    $('#thumbnail').attr('src', originalSrc + '?' + timestamp );
  })
  .fail(function() {
    console.error('更新缩略图失败');
  });
}

额外说明 #

• 对full_path进行encodeURIComponent编码，能避免路径中的特殊字符导致请求参数解析错误。
• 刷新图片时用split('?')[0]清除之前的timestamp，防止URL不断累加无效参数，保持地址整洁。

内容的提问来源于stack exchange，提问作者user16448069