Question

我在从Wordpress JSON API获取图片网址时遇到问题并填写图片代码。

这是我的非工作代码：

$(document).ready(function() {
   $.getJSON('http://interelgroup.com/api/get_post/?post_id=4683', {format: "json"}, function(data) {    
       $('#thumb').attr("src", data.post.thumbnail_images.full.url);
  });
});

HTML就像：

<img id="thumb" src="#">

我做错了什么？帮助赞赏。

谢谢！

注意：我的真实情况是动态的（我正在获取一个动态的帖子ID列表并使用$ .each（）循环它们），但是对于这种情况，我提供了一个带有硬编码的帖子ID的示例，所以你可以检查返回的JSON。

Answer 1

您的问题是因为您无法使用Javascript进行交叉请求，例如websiteA.com想要使用纯XMLHttpRequest从websiteB.com获取信息。这是Access Control禁止的。

资源在请求来自与自身服务的域不同的域的资源时，会生成跨源HTTP请求。例如，http://domain-a.com提供的HTML页面会为<img>发出http://domain-b.com/image.jpg src请求。如今，Web上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。

出于安全原因，浏览器会限制从脚本中发起的跨源HTTP请求。例如，XMLHttpRequest遵循同源策略。因此，使用XMLHttpRequest的Web应用程序只能向其自己的域发出HTTP请求。为了改进Web应用程序，开发人员要求浏览器供应商允许XMLHttpRequest发出跨域请求。

如果您知道自己尝试阅读的网站所有者，则可以要求他们将您的域名添加到页眉中的白名单。如果您这样做，那么您可以根据需要执行$.getJSON。

另一种选择可能是使用某种后端代码来读取该网站并在本地提供服务。假设您的网站为example.com，您可以在example.com/retrieve.php上运行一个PHP脚本，您可以在该脚本中查询该网站，添加＆＃34;参数＆＃34;你需要。之后，由于example.com是您自己的网站，因此您可以自己$.getJSON。在那里a simple PHP proxy you can use here对你为什么能这样做有一些解释。

第三个选项是编辑Javascript代码以使用Yahoo! YQL服务。虽然不能保证永远有效，但您可以使用它代表您查询网站，然后用它来打印您想要的任何内容。缺点是，如果您不拥有您尝试获取的网站，那么这可能在道德上不正确（另外，他们可以添加robots.txt文件来阻止访问。

希望有所帮助。

Answer 2

JSONP解决了这个问题。只需要添加一个回调参数并指定它是一个JSONP，如：

$(document).ready(function() {
   $.getJSON('http://interelgroup.com/api/get_post/?post_id=4683&callback=?', {format: "jsonp"}, function(data) { 
       $('#thumb').attr("src", data.post.thumbnail_images.full.url);
  });
});

此处有更多信息：Changing getJSON to JSONP

有关JSONP的信息：https://en.wikipedia.org/wiki/JSONP

从JSON api解析图像URL

2 个答案: