Javascript 使用jQuery加载JSON，然后将其显示给查看器

我试图通过调用URL使用加载JSON文件：

返回的JSON示例如下所示：

{
    "Locations": {
        "Location": [
            {
                "elevation": "228.0",
                "id": "3063",
                "latitude": "57.206",
                "longitude": "-3.827",
                "name": "Aviemore",
                "nationalPark": "Cairngorms National Park",
                "region": "he",
                "unitaryAuthArea": "Highland"
            },
            {
                "elevation": "1245.0",
                "id": "3065",
                "latitude": "57.116",
                "longitude": "-3.642",
                "name": "Cairn Gorm Summit",
                "nationalPark": "Cairngorms National Park",
                "region": "he",
                "unitaryAuthArea": "Moray"
            },
            {
                "elevation": "146.0",
                "id": "3238",
                "latitude": "55.02",
                "longitude": "-1.88",
                "name": "Albemarle",
                "region": "ne",
                "unitaryAuthArea": "Northumberland"
            }
        ]
    }
}

我需要做的是显示位置列表。为此，我有以下代码：

$(document).ready(function() {

    $("#driver").click(function(event){
        $.getJSON('http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/sitelist?key=' + MY_API_KEY_GOES_HERE, function(jd) {
            $('#stage').html('<p> locations: ' + jd.locations + '</p>');
            $('#stage').append('<p>location: ' + jd.location + '</p>');
            $('#stage').append('<p> name: ' + jd.name + '</p>');
        });
    });

});

但每次都无法加载，我已经学习了很多教程，所有这些似乎都没有帮助。为什么位置列表失败了

谢谢。

美元.getJSON调用是正确的，我在网上找到了另一个人的密钥，他没有你那么小心，我临时使用了他/她的密钥进行测试

得到结果后，您错误地读取了JSON：

$('#stage').html('<p> locations: ' + jd.locations + '</p>');
$('#stage').append('<p>location: ' + jd.location+ '</p>');
$('#stage').append('<p> name: ' + jd.name+ '</p>');

上面的代码将产生如下结果：

{
    "Locations": {
        "Location": [
            {
                "elevation": "228.0",
                "id": "3063",
                "latitude": "57.206",
                "longitude": "-3.827",
                "name": "Aviemore",
                "nationalPark": "Cairngorms National Park",
                "region": "he",
                "unitaryAuthArea": "Highland"
            },
            {
                "elevation": "1245.0",
                "id": "3065",
                "latitude": "57.116",
                "longitude": "-3.642",
                "name": "Cairn Gorm Summit",
                "nationalPark": "Cairngorms National Park",
                "region": "he",
                "unitaryAuthArea": "Moray"
            },
            {
                "elevation": "146.0",
                "id": "3238",
                "latitude": "55.02",
                "longitude": "-1.88",
                "name": "Albemarle",
                "region": "ne",
                "unitaryAuthArea": "Northumberland"
            }
        ]
    }
}

有5968个地点

地点：凯恩威尔

地点：英维威

地点：罗斯哈迪萨莫斯

地点：斯特拉萨兰

---

正如Nierarshi所建议的，您需要相同的源域，或者api资源上允许的域。或者至少在后端web服务器上启用

发件人：

由于浏览器的安全限制，大多数Ajax请求都受同源策略的约束；请求无法从其他域、子域、端口或协议成功检索数据

---

您还必须确定响应标题的内容类型。如果是application/json，您可以像以前一样使用数据，如果不是，您需要使用var object=json解析字符串。parsejd

您似乎对url有访问限制；当我使用我的API密钥时，URL加载良好。在控制台中，您是否收到任何错误？jd.locations算不了什么，它应该是jd.locations，jd.location算不了什么，如果你使用jd.locations.location，它将是一个数组，如果使用jd.locations.location[x].name，它将是一个字符串。我认为你在那里做的编辑很糟糕。如果没有API的代码或上下文，您的问题就没有意义。