使用 JQuery 从 Instagram api 中提取信息答案

【问题标题】：Pulling information from Instagram api using JQuery使用 JQuery 从 Instagram api 中提取信息
【发布时间】：2012-08-09 08:31:44
【问题描述】：

所以最近我一直在尝试通过 ajax 和使用 jquery 向 Instagram API 发出请求。不过，我似乎遇到了一些麻烦。我正在尝试从通过 GET 请求来的 JSON 数组中提取可用信息，并且似乎只能访问数组的一小部分，而其他所有内容都以未定义或空白的形式出现。这是我正在使用的代码：

$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/tags/olympics/media/recent?client_id={clientid}",
success: function(response) {
  for (var i=0; i<25; i++)  
  {
    $("#photos").html(response.data[i].comments.from.username);
  }

  }
});

仅使用 {clientid} 来表示它将去哪里，并且测试信息据说来自 data[i].cmets.from.username 但是这不起作用，我正在绘制空白。我已经使用 JSFiddle 尝试找出哪里出错了，但没有成功。

有没有人知道如何克服这个障碍？我只使用过这个 API 的任何其他 API 都没有任何问题。任何可能有帮助的代码也会很好！

谢谢！

【问题讨论】：

你得到什么回应？能不能把返回的json贴一下？
似乎什么都没有回来，我很困惑为什么会这样并把 &callback=?最后似乎也没有用。
我使用getJSON() 而不是ajax() 来获取我的数据，这是我如何做的一个例子。 jsfiddle.net/wPheR/3 。不幸的是，jsfiddle 似乎在 instagrams 阻止列表中，但至少你可以看到代码。
酷，好吧，除了我只得到一张回来，我决定尝试 from.profile_picture 并且只有一张图片回来，我的 For 循环中有什么东西不是正确的？我还应该添加 &callback=?最后还是会不会有所不同？我在使用 Facebook 或 Twitter API 时从未遇到过这样的问题
cmets.data.from.profile_picture，也需要它自己的循环，因为一个图像可能有多个 cmets。即 cmets.data[i].from.profile_picture。最好的办法是做一个console.log(data)，你可以看到返回的 JSON 的结构。

标签： jquery api jsonp instagram

【解决方案1】：

尝试将&callback=? 附加到网址。

url: "https://api.instagram.com/v1/tags/olympics/media/recent?client_id={clientid}&callback=?",

【讨论】：

【解决方案2】：

您的代码是正确的，但问题是您从计算机文件系统file://....../index.html 查看页面，这对于跨域请求不起作用。

您必须从托管环境 http://localhost/..../index.html 运行您的代码，因为 ajax 发出 http 请求，并且这些请求必须发送到同一个域/服务器。

您可能还必须在您的 instagram 应用程序（在 instagrams 网站上）中设置“WEBSITE URL”，instagram API 将使用它来针对您的client_id 验证您的请求，以确保它们来自正确的域。简而言之，您必须将文件托管在您在 Instagram 网站上的应用程序中指定的同一域中，否则请求将失败。

**更新**
实际上，最后一点似乎并不正确，虽然某些 API 要求您将文件托管在应用程序中指定的同一域中，但 instagram 却没有。

只需确保从托管环境运行脚本即可。

【讨论】：

感谢您的帮助，非常感谢。我已经在我的虚拟主机网站上实现了它，它运行良好。不过，您必须在同一台服务器上绝对正确。再次感谢！