从 JSON api 解析图像 url

Question

我在从 Wordpress JSON API 获取图片 URL 并填写图片标签时遇到问题。

这是我的非工作代码：

$(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 页面向 http://domain-b.com/image.jpg 发出 <img> src 请求。如今，网络上的许多页面从不同的域加载资源，例如 CSS 样式表、图像和脚本。

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

如果您知道要阅读的网站的所有者，您可以要求他们将您的域添加到页眉中的白名单中。如果你这样做，那么你可以随心所欲地做$.getJSON。

另一种选择是使用某种后端代码来读取该网站并在本地提供服务。假设您的网站是example.com，您可以有一个在example.com/retrieve.php 上运行的PHP 脚本，您可以在其中查询该网站，添加您需要的“参数”。在那之后，因为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