Question

我正在尝试从公共API获取测试项目的一些数据。但是当我使用下面的代码时它显示空白页：

hg fold

Answer 1

我可以看到你看到空白页的两个原因，

如上面评论中所述 - $.getJSON网址中缺少单引号，在SO中发布问题之前，请向浏览器控制台查看错误
```
 $.getJSON('http://api....', function(json){...})
```
您要将所有数据附加到<table>标记，但标记中没有<table>标记。添加<table>标记，以便jQuery可以附加您的数据。或者在ajax调用中动态创建<table>元素。

这是您修改过的代码，

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <table></table>

<script>

$(document).ready(function () {
    $.getJSON('http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x',
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].userId + "</td>");
            tr.append("<td>" + json[i].id + "</td>");
            tr.append("<td>" + json[i].title + "</td>");
            tr.append("<td>" + json[i].body + "</td>");
            $('table').append(tr);
        }
    });
});

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

Answer 2

您的代码存在一些问题：
1. getJSON函数中存在语法错误 2.表格元素未在您的html中定义你要回来的对象是一系列的火车＆＃39;。所以你需要通过json["Trains"]

获得火车

以下是您修改后的代码：

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<table>
</table>
<script>

$(document).ready(function () {
    $.getJSON("http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x",
    function (json) {
      var trains = json["Trains"];
        var tr;
        for (var i = 0; i < trains.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + trains[i].Car + "</td>");
            tr.append("<td>" + trains[i].Destination + "</td>");
            $('table').append(tr);
        }
    });
});

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

使用JavaScript显示空白页面的Json解析

2 个答案: