如何通过Ajax请求每3分钟左右变化的图片src属性？

看起来你遇到的问题是要加载一个动态变化的图片链接——这个链接每10分钟左右会更新两次，没法直接固定使用。我来帮你分析一下现有代码可能存在的问题，然后给出针对性的解决方案：

可能的问题点&优化方案 #

1. 确认请求方式是否正确 #

很多返回资源链接的接口会使用GET请求而非POST，如果目标服务器只接受GET请求，你的POST请求就会失败。先尝试把请求类型改成GET：

2. 处理接口返回格式 #

假设你的接口返回的是纯图片URL，或者是包含URL的JSON数据，需要针对性解析：

• 如果接口返回纯文本URL：可以不用指定dataType，jQuery会自动识别
• 如果接口返回JSON格式（比如{"imageUrl": "https://xxx.com/pic.jpg"}）：需要指定dataType: 'json'，并从返回对象中提取URL

3. 添加定时刷新逻辑 #

因为图片链接会定时变化，你需要定期调用loadPicture函数，保证图片始终是最新的。根据你说的“10分钟约变化2次”，可以设置每3分钟刷新一次（避免错过更新）。

4. 完善错误排查 #

在错误回调里打印详细的错误信息，方便你排查请求失败的原因（比如跨域、接口返回错误等）。

修改后的完整代码 #

function loadPicture() {
  $.ajax({
    type: 'GET', // 优先尝试GET请求，若接口要求POST再改回
    url: 'https://myAdress.com',
    dataType: 'text', // 如果是JSON则改为'json'
    success: function(response) {
      // 处理不同返回格式：如果是JSON就解析，否则直接用返回值
      let imageUrl = response;
      if (typeof response === 'object') {
        imageUrl = response.imageUrl || response.src; // 根据接口实际返回字段调整
      }
      
      if (imageUrl) {
        $('#picture').attr('src', imageUrl);
      } else {
        $('#picture').text('无法获取有效的图片链接');
      }
    },
    error: function(xhr, status, error) {
      // 打印错误信息到控制台，方便排查
      console.error('图片加载失败详情:', {
        status: xhr.status,
        statusText: xhr.statusText,
        error: error
      });
      $('#picture').text('Une erreur est survenue.');
    }
  });
}

// 页面加载完成后立即加载一次，然后定时刷新
$(document).ready(function() {
  loadPicture();
  // 每3分钟（180000毫秒）刷新一次
  setInterval(loadPicture, 180000);
});

额外注意事项 #

• 跨域问题：如果你的网页所在域名和https://myAdress.com不同，浏览器会因为CORS策略阻止请求。解决办法：
  • 让目标服务器添加Access-Control-Allow-Origin响应头，允许你的域名访问
  • 搭建一个后端代理，由你的后端去请求图片链接，再返回给前端
• 接口返回验证：可以先在浏览器地址栏直接访问https://myAdress.com，看看返回的内容是不是你需要的图片URL，确认接口是否正常工作

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