javascript - 从 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想要从 websiteB.com 获取信息使用普通的 XMLHttpRequest。 Access Control 禁止这样做.

A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one which served itself. For example, an HTML page served from http://domain-a.com makes an <img> src request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.

如果您知道您要阅读的网站的所有者，您可以要求他们将您的域添加到页面标题的白名单中。如果你这样做，那么你可以做$.getJSON一样多的事情。如你所愿。

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

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

希望有帮助。