从jquery调用JSONPAPI未显示任何内容_Jquery_Instagram

从jquery调用JSONPAPI未显示任何内容

jquery instagram

从jquery调用JSONPAPI未显示任何内容,jquery,instagram,Jquery,Instagram,我尝试调用Instagram api来显示最新的流行图像，首先我使用提供的api url调用jQuery ajax函数：当我在浏览器中键入url时，我将看到一些xml文件的结果。所以我假设这是正确的url，但它在我的html文件中不起作用。谁知道怎么了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

我尝试调用Instagram api来显示最新的流行图像，首先我使用提供的api url调用jQuery ajax函数：当我在浏览器中键入url时，我将看到一些xml文件的结果。所以我假设这是正确的url，但它在我的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>


无标题文件
$（函数（）{
$.ajax({
键入：“获取”，
数据类型：“jsonp”，
cache:false，
url:“https://api.instagram.com/v1/media/popular?client_id=84abd0d71cb14ad9885cf1dc59594144",
成功：功能（数据）{
对于（变量i=0；i<10；i++）{
$（“#图片”）。附加（“”）；
}
});
})

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

你只是放错了一些大括号。这种情况经常发生。如果你还没有使用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>");
            }
        }
    });
});

$（函数（）{
$.ajax({
键入：“获取”，
数据类型：“jsonp”，
cache:false，
url:“https://api.instagram.com/v1/media/popular?client_id=84abd0d71cb14ad9885cf1dc59594144",
成功：功能（数据）{
对于（变量i=0；i<10；i++）{
$（“#图片”）。附加（“”）；
}
}
});
});

小提琴：

此外，您还说，如果输入URL，您会看到一些XML。正如您可能从名称中看到的，您看到的是JSON。您用正确的方式对其进行了寻址，但使用正确的术语以确保人们不会感到困惑是有帮助的。

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

你只是放错了一些大括号。这种情况经常发生。如果你还没有使用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>");
            }
        }
    });
});

$（函数（）{
$.ajax({
键入：“获取”，
数据类型：“jsonp”，
cache:false，
url:“https://api.instagram.com/v1/media/popular?client_id=84abd0d71cb14ad9885cf1dc59594144",
成功：功能（数据）{
对于（变量i=0；i<10；i++）{
$（“#图片”）。附加（“”）；
}
}
});
});

小提琴：

另外，如果您输入URL，您会看到一些XML。正如您可能从名称中看到的，您看到的是JSON。您以正确的方式对其进行了寻址，但使用正确的术语以确保人们不会感到困惑是有帮助的。

将脚本放在

之后，以便ajax调用找到div。

将脚本放在

之后在
之后，以便ajax调用找到div。
不是必需的。它已经在jQuery document ready函数中。不是必需的。它已经在jQuery document ready函数中。您的回答帮助我解决了instagram API中稀疏的文档JSONP的问题：-替换新版本的URLhttps://api.instagram.com/v1/tags/nofilter/media/recent？access_-token=access_-token
有效。考虑一下你是否想更新你的帖子（另外，由于instagram更改了发出API请求的方式，JSFIDLE也无法工作。您的回答帮助我解决了instagram API中稀疏文档JSONP的一个问题：-替换新版本的URLhttps://api.instagram.com/v1/tags/nofilter/media/recent?access_token=ACCESS_TOKEN
有效。只要考虑一下如果您想更新您的帖子（另外，由于instagram改变了发出API请求的方式，JSFIDLE也不起作用），请拨打电话。