从 jquery 调用 jsonp api 没有显示答案

【问题标题】：call jsonp api from jquery nothing shown从 jquery 调用 jsonp api 没有显示
【发布时间】：2012-03-16 05:23:51
【问题描述】：

我正在尝试调用 Instagram api 来显示最新的流行图像，首先我使用提供的 api url 调用 jQuery ajax 函数：当我在浏览器中键入 url 时，我将看到一些 xml 文件的结果。所以我认为这是正确的网址，但它不适用于我的 html 文件。有谁知道怎么回事？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

$(function(){

    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/media/popular?client_id=84abd0d71cb14ad9885cf1dc59594144",
         success:  function(data) {
            for (var i = 0; i < 10; i++) {
                $("#pics").append("<a target='_blank' href='" + data.data[i].link +
                "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
            }
    });

})

</script>
</head>

<body>

<div id="pics">

</div>

</body>
</html>

【问题讨论】：

标签： jquery instagram

【解决方案1】：

[编辑：根据下面的评论，这个建议不再是最新的，小提琴不再起作用。如果时间允许，我可能会抽出时间来修复它；否则，请注意]

你只是放错了一些大括号。它发生了。如果您还没有使用 IDE 或其他特定于代码的编辑器，可以提醒您注意不匹配的大括号和标签，您应该进行切换！

$(function() {

    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/media/popular?client_id=84abd0d71cb14ad9885cf1dc59594144",
        success: function(data) {
            for (var i = 0; i < 10; i++) {
                $("#pics").append("<a target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.low_resolution.url + "'></img></a>");
            }
        }
    });
});

小提琴：http://jsfiddle.net/KhW2E/

另外，你说如果你输入 URL，你会看到一些 XML。正如您可能从名称中所期望的那样，您看到的是 JSON。您正在以正确的方式解决它，但使用正确的术语有助于确保人们不会感到困惑。

【讨论】：

您的回答帮助我解决了 instagram API 中稀疏文档 JSONP 的问题：instagram.com/developer/endpoints - 替换新版本的 URL https://api.instagram.com/v1/tags/nofilter/media/recent?access_token=ACCESS_TOKEN 有效。只是考虑一下，也许你想更新你的帖子（jsfiddle 也不起作用，因为 instagram 改变了发出 API 请求的方式。

【解决方案2】：

将脚本放在</body> 之后，以便ajax 调用找到该div。

【讨论】：

没有必要。它已经在一个 jQuery 文档就绪函数中。