如何使用AJAX接收JSON文件并使用javascript解析它?

时间:2012-08-03 08:00:23

标签: jquery ajax json parsing foursquare

我正在尝试解析foursquare给我的这个非常复杂的JSON。这是我的AJAX请求:

    $.ajax({
      url: 'https://api.foursquare.com/v2/venues/explore',
      dataType: 'json',
      data: 'limit=7&ll='+latitude+','+longitude+'&client_id='+client_id+'&client_secret='+client_secret+'',
      async: false,
      success: getVenues(data)
});

getVenues是我正在制作的一个函数,用于对JSON进行排序并在页面上显示相关内容。我遇到的第一个问题是我不知道如何告诉成功函数它应该处理从服务器接收的数据 - 这个数据是存储在某个变量的某个地方吗?我目前正在做getVenues(数据),但它告诉我'数据'不是一个定义的变量。然而,许多在线教程似乎对仅仅为这个神秘的“数据”执行功能感到高兴,而他们似乎有效。

接下来,我在解析JSON本身时遇到了问题。这是我正在尝试处理的JSON的简化版本:http://pastie.org/4382619。如何选择场地名称和ID等,并在页面上显示?

由于

3 个答案:

答案 0 :(得分:3)

您在线看到的教程可能会将success回调声明为匿名函数。在这些情况下,data未被传递到函数中,它被声明为该函数的参数。 jQuery非常适合处理从AJAX调用到成功函数的响应作为第一个参数,无论你选择命名它(data只是最有意义)。

此外,如果在dataType: 'json'调用上指定$.ajax(),jQuery将在将JSON响应传递给该函数之前对其进行解析,确保它是有效的JSON并且您有一个对象可以在其中使用功能。如果响应不是有效的JSON,则不会执行success回调,而是执行error回调(如果已指定)。

在你的情况下,你传递了一个函数引用,所以假设你的getVenues函数看起来像这样:

function getVenues(data) {
    // do something
}

然后你就可以做到:

success: getVenues

在您传递给$.ajax()的对象中。

答案 1 :(得分:3)

你应该这样做:

$.ajax({
    // some other code
    success: getVenues
});

你告诉ajax:“使用getVenues函数”,而不是“使用getVenus(数据)值”。至于第二个问题:

var l = data.response.groups.length;
for (var i = 0; i < l; i++) {
    var group = data.response.groups[i];
    var k = group.items.length;
    for (var j = 0; j < k; j++) {
        var venue = group.items[j].venue;
        // use venue as you wish
    }
}

答案 2 :(得分:2)

ajax调用中对象的success属性只需要函数名或函数对象。你要么只给它名字,就像那样:

    $.ajax({
      url: 'https://api.foursquare.com/v2/venues/explore',
      dataType: 'json',
      data: 'limit=7&ll='+latitude+','+longitude+'&client_id='+client_id+'&client_secret='+client_secret+'',
      async: false,
      success: getVenues
});

或者你这样做:

  $.ajax({
      url: 'https://api.foursquare.com/v2/venues/explore',
      dataType: 'json',
      data: 'limit=7&ll='+latitude+','+longitude+'&client_id='+client_id+'&client_secret='+client_secret+'',
      async: false,
      success: function(data) { getVenues(data) }
});