【问题标题】：My $.getJSON() script isn't working我的 $.getJSON() 脚本不工作
【发布时间】：2014-08-12 15:04:41
【问题描述】：

我刚开始使用 JSON / AJAX 的东西，我很难弄清楚为什么这不起作用...... 我搜索了很多地方，但没有提供有关如何使用 $.getJSON 的详细说明。你能帮帮我吗？您能否提供一些信息，为什么我的脚本无法正常工作？！我想这是因为i, item 和data.response[i] 但我找不到他们需要的东西..

var url = "https://api.instagram.com/v1/users/3/media/recent/?access_token=18360510.5b9e1e6.de870cc4d5344ffeaae178542029e98b";

$.getJSON(url, function(data) 
{
    $.each(data.response, function (i, item) 
    {
        instagram += '<li>';
        instagram += '<a href="'+ data.response[i].link +'" target="_blank">';
        instagram += '<div class="imag3" style="background-image: url('+ data.response[i].images.low_resolution.url +');">';
        instagram += '</div></a>';
        instagram += '</li>';

        $('#instagram-cont').html(instagram);
    });

更新

按照建议，我使用了console.log(data) 在控制台中它给了我一个Object 下拉列表，里面有data: Array[15] 所以我像这样更新了我的代码：

var url = "https://api.instagram.com/v1/users/3/media/recent/?access_token=18360510.5b9e1e6.de870cc4d5344ffeaae178542029e98b";

    $.getJSON(url, function(data) {
    $.each(data.data, function (i, item) {
    instagram += '<li>';
    instagram += '<a href="'+ data.data[i].link +'" target="_blank">';
    instagram += '<div class="imag3" style="background-image: url('+ data.data[i].images.low_resolution.url +');">';
    instagram += '</div></a>';
    instagram += '</li>';

    $('#instagram-cont').html(instagram);
    });

它成功了！！！谢谢大家的帮助

【问题讨论】：

你能提供一个jsfiddle吗？
查看您的 JavaScript 错误控制台。它说什么？
看起来你有语法错误。
是跨站脚本问题吗？可能需要启用 CORS。
@user3933986 $.json() 的文档没有解释这些事情，因为它们与 $.json() 无关。

标签： javascript jquery ajax json instagram

【解决方案1】：

您可能需要使用 JSONP 而不是常规的 AJAX 调用。

http://www.sitepoint.com/jsonp-examples/

【讨论】：

【解决方案2】：

这是一个有效的小提琴：http://jsfiddle.net/76bew4vk/

console.log 是你的朋友。用它来查看返回数据的结构。我还将调用更改为 jsonp。

    var url = "https://api.instagram.com/v1/users/3/media/recent/?access_token=18360510.5b9e1e6.de870cc4d5344ffeaae178542029e98b";

$.ajax({
    type: 'GET',
    url: url,
    contentType: "application/json",
    dataType: 'jsonp'
})
.done(function(data){
    //console.log(data);
    $.each(data.data, function (i, item) 
    {
        instagram = '<li>';
        instagram += '<a href="'+ item.link +'" target="_blank">';
        instagram += '<div class="imag3" style="background-image: url('+item.images.low_resolution.url +');">';
        instagram += '</div></a>';
        instagram += '</li>';

        $('#instagram-cont').append(instagram);
    });
});

【讨论】：

【解决方案3】：

首先你应该在'each'函数中使用“item”而不是data.response[i] 其次，我认为您想在每个循环之外使用更改 html

【讨论】：

【解决方案4】：

返回的 JSON 数据流不包含属性“data.response”

将此作为参数引用$.each(data.response, ....会导致data.response[i].link中的长度错误

查看返回的 JSON 数据的结构并正确处理异常。

【讨论】：

【解决方案5】：

按照 cmets 的建议，我使用了 console.log(data) 在控制台中它给了我一个Object 下拉列表，里面有data: Array[15] 所以我像这样更新了我的代码：

var url = "https://api.instagram.com/v1/users/3/media/recent/?access_token=18360510.5b9e1e6.de870cc4d5344ffeaae178542029e98b";

    $.getJSON(url, function(data) {
    $.each(data.data, function (i, item) {
    instagram += '<li>';
    instagram += '<a href="'+ data.data[i].link +'" target="_blank">';
    instagram += '<div class="imag3" style="background-image: url('+ data.data[i].images.low_resolution.url +');">';
    instagram += '</div></a>';
    instagram += '</li>';

    $('#instagram-cont').html(instagram);
    });

而且成功了！！！谢谢大家的帮助

【讨论】：