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

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

javascript jquery html json

Javascript ESPN API，如何解析/显示JSON数据？,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我不是一个处理API JSON数据本身的新手，因为我可以很容易地用PHP解析它。但是我想使用jQuery来完成它，并将其用于我正在从事的个人项目中。正如您在下面的代码中所看到的，我试图抓取当前的每一个游戏，并将它们显示在html的主体中，每个游戏都封装在一个名为contentdiv的div中。我就是没办法让事情顺利进行。。。对象引用在each中似乎是正确的，但我无法返回任何内容 <!DOCTYPE html> <html lang="en"> <head> &

我不是一个处理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>

使现代化测试后，ESPNAPI似乎只返回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
}
});

有什么问题吗？我看不到任何与您使用竞赛相关的内容，但除此之外，请提供有关失败原因的详细信息。请注意，您也可以在JavaScript控制台中进行调试。抱歉，在我发布问题后，我意识到我引用的是不同的API数据集。编辑以引用正确的信息。由于这是跨域的，因此数据应被视为jsonp。这是内置于$.getJSON的吗？在处理jsonp时，我通常使用$.ajax，您可以添加callback=？到你的url？有什么问题吗？@DaveNewton问题是我根本无法让事情正常进行。换句话说，我似乎无法获得预期的输出。正如我在问题中所说的，对象引用在each中似乎是正确的，但我无法得到任何返回。我还尝试通过JavaScript控制台运行一些东西，但没有发现任何错误。这是否意味着我如何使用它们引用数组确实存在问题？我清除了一些拼写错误。不幸的是，ESPN已经停止了他们的公共API，所以我无法实际测试。好的，我已经测试过了，但仍然无法解决这个问题。我根本无法把东西展示出来。这就是说，如果您想测试您提供的答案的代码，我有另一个链接到您可以使用的数据。尝试这个不需要API密钥。

// 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
}
});