更新

Question

使用API JSON数据本身并不是新手，因为我可以很容易地在PHP中解析它。但我想用jQuery在我正在开发的个人项目中使用它。正如你在下面的代码中看到的那样，我想要抓住当前每一天的游戏并将其显示在html的主体中，每个游戏都包含在一个名为“contentdiv”的div中。我似乎无法让事情发挥作用...... each中的对象引用似乎是正确的，但我无法返回任何内容。

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>

$(document).ready(function() {
      var url = "http://api.espn.com/v1/sports/baseball/mlb/events/?apikey=xxxxxxx";
      $.getJSON(url, function(data) {
        $.each(data.contents[0].contents, function() {
          $('body').append('<div id="contentdiv">' + this.competitors[0].name + " " + "at" + " " + this.competitors[1].name + '</div>');
      });
    });
  });

</script>
</head>
<body>
</body>
</html>

这是我在使用JSON编辑器查看API响应时获得的响应主体的一部分：

{
  "contents": [
    {
      "contents": [
        {
          "uid": "10:340819123",
          "gameType": "1",
          "status": "Final",
          "statusType": "3",
          "competitors": [
            {
              "uid": "10:15",
              "logo": {
                "logoFormat": "scoreboard",
                "logo": "atl"
              },
              "record": "66-60",
              "location": "Atlanta",
              "color": "#002248",
              "name": "Braves",
              "score": "11",
              "winner": "true",
              "type": "team",
              "displayName": "Braves",
              "shortName": "ATL"
            },
            {
              "uid": "10:23",
              "logo": {
                "logoFormat": "scoreboard",
                "logo": "pit"
              },
              "record": "64-62",
              "location": "Pittsburgh",
              "color": "#111111",
              "name": "Pirates",
              "score": "3",
              "winner": "false",
              "type": "team",
              "displayName": "Pirates",
              "shortName": "PIT"
            }
          ],
          "sport": "mlb",
          "buttons": [
            {
              "text": "Recap",
              "link": {
                "type": "internal",
                "format": "gamecast",
                "defaultFormat": "",
                "uri": "mlb/gamecast?gameId=340819123&appsrc=sc",
                "deleteUri": "",
                "share": {
                  "text": "MLB:  FINAL - BRAVES 11 PIRATES 3 via @ScoreCenter",
                  "url": "http://scores.espn.go.com/mlb/gamecast?gameId=340819123"
                }
              },
              "type": "custom"
            },
            {
              "text": "Stats",
              "link": {
                "type": "internal",
                "format": "gamecast",
                "defaultFormat": "",
                "uri": "mlb/gamecast?gameId=340819123&appsrc=sc&gcSection=boxscore",
                "deleteUri": "",
                "share": {
                  "text": "MLB:  FINAL - BRAVES 11 PIRATES 3 via @ScoreCenter",
                  "url": "http://scores.espn.go.com/mlb/gamecast?gameId=340819123"
                }
              },
              "type": "custom"
            }
          ],
          "type": "team",
          "gameDate": "2014-08-19T23:05:00Z",
          "macro": {
            "type": "",
            "format": "macro",
            "defaultFormat": "",
            "uri": "sport=mlb&id=340819123",
            "deleteUri": ""
          },
          "share": {
            "text": "MLB:  FINAL - BRAVES 11 PIRATES 3 via @ScoreCenter",
            "url": "http://scores.espn.go.com/mlb/gamecast?gameId=340819123"
          },
          "tv": "ROOT",
          "omniture": {
            "sport": "mlb",
            "league": "mlb"
          },
          "macroHeader": "ATL @ PIT",
          "ads": {
            "site": "m.app.espn.us.sc.mlb",
            "zone": "events;"
          },
          "note": "Justin Upton homers and knocks in five runs to power the Braves to a sixth win in a row, and the Pirates suffer a seventh straight defeat. Pittsburgh's Andrew McCutchen goes 0-for-4 in his return from the DL."
        },
        {
          "uid": "10:340819122",
          "gameType": "1",
          "status": "Final",
          "statusType": "3",
          "competitors": [
            {
              "uid": "10:12",
              "logo": {
                "logoFormat": "scoreboard",
                "logo": "sea"
              },
              "record": "68-57",
              "location": "Seattle",
              "color": "#012a5b",
              "name": "Mariners",
              "score": "5",
              "winner": "true",
              "type": "team",
              "displayName": "Mariners",
              "shortName": "SEA"
            },
            {
              "uid": "10:22",
              "logo": {
                "logoFormat": "scoreboard",
                "logo": "phi"
              },
              "record": "55-71",
              "location": "Philadelphia",
              "color": "#be0011",
              "name": "Phillies",
              "score": "2",
              "winner": "false",
              "type": "team",
              "displayName": "Phillies",
              "shortName": "PHI"
            }
          ],
          "sport": "mlb",
          "buttons": [
            {
              "text": "Recap",
              "link": {
                "type": "internal",
                "format": "gamecast",
                "defaultFormat": "",
                "uri": "mlb/gamecast?gameId=340819122&appsrc=sc",
                "deleteUri": "",
                "share": {
                  "text": "MLB:  FINAL - MARINERS 5 PHILLIES 2 via @ScoreCenter",
                  "url": "http://scores.espn.go.com/mlb/gamecast?gameId=340819122"
                }
              },
              "type": "custom"
            },
            {
              "text": "Stats",
              "link": {
                "type": "internal",
                "format": "gamecast",
                "defaultFormat": "",
                "uri": "mlb/gamecast?gameId=340819122&appsrc=sc&gcSection=boxscore",
                "deleteUri": "",
                "share": {
                  "text": "MLB:  FINAL - MARINERS 5 PHILLIES 2 via @ScoreCenter",
                  "url": "http://scores.espn.go.com/mlb/gamecast?gameId=340819122"
                }
              },
              "type": "custom"
            }
          ],
          "type": "team",
          "gameDate": "2014-08-19T23:05:00Z",
          "macro": {
            "type": "",
            "format": "macro",
            "defaultFormat": "",
            "uri": "sport=mlb&id=340819122",
            "deleteUri": ""
          },
          "share": {
            "text": "MLB:  FINAL - MARINERS 5 PHILLIES 2 via @ScoreCenter",
            "url": "http://scores.espn.go.com/mlb/gamecast?gameId=340819122"
          },
          "tv": "CSN",
          "omniture": {
            "sport": "mlb",
            "league": "mlb"
          },
          "macroHeader": "SEA @ PHI",
          "ads": {
            "site": "m.app.espn.us.sc.mlb",
            "zone": "events;"
          },
          "note": "Hisashi Iwakuma fans a season-high 11 in eight scoreless innings to guide the Mariners to their 11th win in 14 games."
        },
        {
          "uid": "10:340819110",
          "gameType": "1",
          "status": "Final",
          "statusType": "3",
          "competitors": [
            {
              "uid": "10:18",
              "logo": {
                "logoFormat": "scoreboard",
                "logo": "hou"
              },
              "record": "53-73",
              "location": "Houston",
              "color": "#000000",
              "name": "Astros",
              "score": "7",
              "winner": "true",
              "type": "team",
              "displayName": "Astros",
              "shortName": "HOU"
            },
            {
              "uid": "10:10",
              "logo": {
                "logoFormat": "scoreboard",
                "logo": "nyy"
              },
              "record": "63-60",
              "location": "New York",
              "color": "#011739",
              "name": "Yankees",
              "score": "4",
              "winner": "false",
              "type": "team",
              "displayName": "Yankees",
              "shortName": "NYY"
            }
          ],
          "sport": "mlb",
          "buttons": [
            {
              "text": "Recap",
              "link": {
                "type": "internal",
                "format": "gamecast",
                "defaultFormat": "",
                "uri": "mlb/gamecast?gameId=340819110&appsrc=sc",
                "deleteUri": "",
                "share": {
                  "text": "MLB:  FINAL - ASTROS 7 YANKEES 4 via @ScoreCenter",
                  "url": "http://scores.espn.go.com/mlb/gamecast?gameId=340819110"
                }
              },
              "type": "custom"
            },
            {
              "text": "Stats",
              "link": {
                "type": "internal",
                "format": "gamecast",
                "defaultFormat": "",
                "uri": "mlb/gamecast?gameId=340819110&appsrc=sc&gcSection=boxscore",
                "deleteUri": "",
                "share": {
                  "text": "MLB:  FINAL - ASTROS 7 YANKEES 4 via @ScoreCenter",
                  "url": "http://scores.espn.go.com/mlb/gamecast?gameId=340819110"
                }
              },
              "type": "custom"
            }
          ],
          "type": "team",
          "gameDate": "2014-08-19T23:05:00Z",
          "macro": {
            "type": "",
            "format": "macro",
            "defaultFormat": "",
            "uri": "sport=mlb&id=340819110",
            "deleteUri": ""
          },
          "share": {
            "text": "MLB:  FINAL - ASTROS 7 YANKEES 4 via @ScoreCenter",
            "url": "http://scores.espn.go.com/mlb/gamecast?gameId=340819110"
          },
          "tv": "WWOR",
          "omniture": {
            "sport": "mlb",
            "league": "mlb"
          },
          "macroHeader": "HOU @ NYY",
          "ads": {
            "site": "m.app.espn.us.sc.mlb",
            "zone": "events;"
          },
          "note": ""
        },

Answer 1

更新

经过测试，看来ESPN api只返回json而不是jsonp。这就是为什么你能够在浏览器中看到结果或在服务器端使用某些东西，但实际上无法使用ajax获取json的原因。

您最好的选择是使用某种代理，它将从api获取数据并将其作为json输出到同一域或jsonp，如果调用跨域。

这通常是假设返回jsonp时如何处理跨域get：

// Example JSONP request with jQuery
$.ajax({
url: "http://api.espn.com/v1/sports/baseball/mlb/events/",
data:{apikey: "xxxxxx",
    _accept: "application/json"},
type: 'GET',
dataType: "jsonp",
success: function(data) {
    $.each(data.contents[0].contents, function() {
      $('body').append('<div id="contentdiv">' + this.competitors[0].name + " " + "at"     + " " + this.competitors[1].name + '</div>');
  });
},
error: function() {
     // handle the error
}
});

ESPN API，如何解析/显示JSON数据？

1 个答案:

更新