Question

我正在尝试调用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>

Answer 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。您正在以正确的方式解决它，但使用正确的术语确保人们不会感到困惑是有帮助的。

Answer 2

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

从jquery调用jsonp api没有显示

2 个答案: