如何在 HTML 网页上的表中显示 Web 服务数据?

Question

我想在我的网站上显示一些来自网络服务的信息。Web 服务以 .json 格式返回值。我不想使用任何服务器端语言，因为我的网站是静态的。如何在 JQuery 或 AngularJS 的帮助下，在网页中以表格显示 .json 数据。提前谢谢。

Answer 1

Jquery

您可以使用 ajax 请求或$.getJSON方法从服务器获取数据并解析该 json 并将其添加到表中。

$.ajax ({
url :'www.google.com',
type:'GET',
datatype: 'json',
success:function(data) {
var tr
for (var i=0;i < data.length;i++) {
tr = $('<tr />')
tr.append("<td>" + data.name +"</td">);
tr.append("<td"> + data.phone + "</td">);
$("table").append(tr);
}
})
$.getJSON method is smaller and use can parse the data using `$.each`
$.getJSON(url,function(json){
$.each(json, function(item){
$("td").append(item);
});
});

只需根据表和 json 数据修改追加结构即可。

AngularJS

对于 Angular 1.x 版本

您可以使用$http方法

$http({
url :'https://www.yourUrlHere/api/json',
method: 'GET',
})
.then(function success(response){
$scope.data = response;
},function error(response) {
$scope.error = response;
})
});

Then in your table structure you can use ng-repeat to loop through the data and add that data into your table.

<table>
<tr ng-repeat="values in data">
<td>{{values.name}}</td>
<td>{{values.phone}}</td>
</tr>
</table>

您必须根据需要修改响应 json。例如，如果用户信息存储在 response.users 中，则需要设置 $scope.data = response.users