如何使用 JavaScript 从 URL 获取 JSON？答案

【问题标题】：How to fetch JSON from a URL using JavaScript?如何使用 JavaScript 从 URL 获取 JSON？
【发布时间】：2011-09-21 12:13:56
【问题描述】：

我在我的一个 HTML 文件中使用以下代码

var queryURL = encodeURI(yahooUrl + loc + appId);
alert(queryURL);

$.getJSON(queryURL, function(data){
    alert('inside getJSON')
    alert(data);
    var items = [];
    $.each(data, function(key, value){
        items.push('<li id="' + key + '">' + value + '</li>');
    });
    $('<ul/>', {
        'class': 'my-new-list',
        html: items.join('')
    }).appendTo('body');
});`

queryURL 是一个大查询，如果我从浏览器的地址栏加载它，我会得到一个包含 JSON 对象的文件。但是以下代码不起作用，整个 JSON 对象显示在 Firefox 的错误控制台中，并显示错误“无效标签”。我在查询字符串的末尾添加了&callback=?，正如 SO 的一些答案中提到的那样。

谁能指出我做错了什么？

编辑：用于

queryURL = “http://where.yahooapis.com/geocode?location=107,South%20Market,San%20Jose,San%20Fransico,Leusina,USA,&flags=J&appid=dj0yJmk9SUk0NkdORm9qM2FyJmQ9WVdrOU1tVnFUVzlVTm5NbWNHbzlORFl4TnpZME5UWXkmcz1jb25zdW1lcnNlY3JldCZ4PWE1&callback=？” P>

我收到以下错误：

Error: invalid label
Source File: http://where.yahooapis.com/geocode?location=107,South%20Market,San%20Jose,San%20Fransico,Leusina,USA,&flags=J&appid=dj0yJmk9SUk0NkdORm9qM2FyJmQ9WVdrOU1tVnFUVzlVTm5NbWNHbzlORFl4TnpZME5UWXkmcz1jb25zdW1lcnNlY3JldCZ4PWE1&callback=jQuery16404719878257064011_1316606312366&_=1316608283354
Line: 1, Column: 1

源代码：

{"ResultSet":{"version":"1.0","Error":0,"ErrorMessage":"No error","Locale":"us_US","Quality":87,"Found":1,"Results":[{"quality":39,"latitude":"37.336849","longitude":"-121.847710","offsetlat":"37.338470","offsetlon":"-121.885788","radius":34800,"name":"","line1":"","line2":"San Jose, CA","line3":"","line4":"United States","house":"","street":"","xstreet":"","unittype":"","unit":"","postal":"","neighborhood":"","city":"San Jose","county":"Santa Clara County","state":"California","country":"United States","countrycode":"US","statecode":"CA","countycode":"","uzip":"","hash":"","woeid":2488042,"woetype":7}]}}

【问题讨论】：

callback=? 用于触发jsonp 模式，这仅在您从页面以外的域获取json数据时有用。
是的...你可能猜到我正在查询雅虎的 API...
您可以发布 JSON 字符串或其中的一部分吗？这可能是由于 JSON 格式不正确，因为字符串显示在控制台中，因此返回给客户端的问题。
甚至更好的是您发送的 queryURL（浏览器栏中的通用工作示例）。
请看编辑后的代码,,,, @roselan

标签： javascript jquery json

【解决方案1】：

这可能是因为jQuery自动切换到使用JSONP（因为它是一个跨域请求）和Yahoo apparently doesn't use JSONP but regular JSON。您是否尝试过旧的 $.ajax() 和 dataType:"JSON"？

使用 $.ajax：

        $.ajax({
            url: queryURL,
            dataType: "JSON",
            success: function(data){
              alert('inside getJSON')
              alert(data);
              var items = [];
              $.each(data, function(key, value){
                  items.push('<li id="' + key + '">' + value + '</li>');
              });
              $('<ul/>', {
                  'class': 'my-new-list',
                  html: items.join('')
              }).appendTo('body');
            }
        });

让我在这里特别好，因为我今天过得很糟糕：Working example

【讨论】：

其实没试过$.ajax()。老实说，我真的不知道如何使用它..
谢谢...我已经尝试了上面的代码..似乎工作但列表是逐个字符准备的......并且可读性不强。我认为雅虎正在发送一个很长的“字符串”而不是 JSON。 . .
这不是你的问题。查看您的代码和返回的 JSON，您可能没有迭代正确的项目。尝试迭代data.ResultSet.Results[0]，如果抛出错误，首先使用data=eval("(" + data + ")"); 另外，
当我尝试 data.ResultSet.Results[0].... 在错误控制台中出现一个错误，即未定义 ResultSet.... 当我将行 data:"format=json" 替换为您建议的dataType:"JSON" ...感谢您的帮助....