从 JSON API 解析图像 URL

Parse image url from JSON api

本文关键字：图像 URL JSON API      更新时间：2023-09-26

我在从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。

你的问题是因为你无法使用Javascript进行交叉请求，比如说websiteA.com想用一个普通的XMLHttpRequest从websiteB.com获取信息。这是访问控制所禁止的。

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

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

如果您知道您尝试阅读的网站的所有者，您可以做的是要求他们将您的域添加到页面标题中的白名单中。如果你这样做，那么你可以

做你想做$.getJSON多。

另一种选择可能是使用某种后端代码来读取该网站并在本地提供服务。假设您的网站是example.com，您可以有一个运行在example.com/retrieve.php上的 PHP 脚本，您可以在其中查询该网站，添加您需要的"参数"。之后，由于example.com是您自己的网站，您可以对自己做一个$.getJSON。这里有一个简单的PHP代理，你可以在这里使用一些解释，说明为什么你可以这样做。

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

希望有帮助。

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);
  });
});

更多信息在这里：将getJSON更改为JSONP

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

相关文章：