首先，我需要更正您的 json 格式。由于您正在处理对象格式的数组
[
{
propery: "some value",
property2: "some other value"
},
//.... more objects {} here
];
在我们深入研究代码之前，您应该知道来自服务器的响应以字符串形式出现，因此您需要将其“编译”为 javascript 对象。你可以通过两种方式做到这一点
- 首选方式使用
JSON.parse(someString);方法
- 丑陋和不太理想的是使用
eval或Function类似的方法var result=[]; eval("result=" + responseStringFromServer);
始终使用第一种方法，因为它更好，如果您不知道为什么，请查看此链接
由于您想使用您的类型（表格、行和单元格），您应该知道它是无用的，因为 JSON 缺少 JavaScript 对象表示法，换句话说，一旦您使用 var myArray= JSON.parse(responseFromServer);myArray 将是一个 javascript 数组，其中每个项目都是 Javascript 对象。如果您不需要知道下属类型是什么，请不要将其转换为您的对象
工作示例可以在这里找到这里
是它的工作原理
您的数据需要 html 中的占位符，可以说它看起来像这样：
<table id="personDataTable">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</table>
假设我们从 ajax 得到了这样的结果
[
{
id: 1,
firstName: "Peter",
lastName: "Jhons"
},
{
id: 2,
firstName: "David",
lastName: "Bowie"
}
]
要绘制数据，您可以使用这 3 种方法
// This will iterate over each result in array (as you mentioned the javascript table)
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
// call method to draw each row
drawRow(data[i]);
}
}
function drawRow(rowData) {
// create html table row
var row = $("<tr />")
// append it to HTML teable element
$("#personDataTable").append(row);
// append each cell to row html element with data in it
row.append($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.firstName + "</td>"));
row.append($("<td>" + rowData.lastName + "</td>"));
}
最后，您的 ajax 调用（当然使用 jQuery）
$.ajax({
url: '/echo/json/',
type: "post",
dataType: "json",
data: {
//... pass here any data you want to your server
},
success: function(data, textStatus, jqXHR) {
// since we are using jQuery, you don't need to parse response
drawTable(data);
}
});
在这篇文章的最后，您应该知道那里有许多可以简化此过程的整洁库。有些确实适合用于复杂的情况，例如 BackboneJS 和 AngularJs .... 有些很简单，例如 jQuery.template 和 jQuery.render，它们只是模板引擎。这取决于您的应用程序有多复杂以及在单个页面中应该发生多少“渲染”。
与上面的示例相同，但使用 AngularJS
工作示例可以在这里找到
您将需要这样的页面：
<html ng-app="myApp">
<head>
<title>Example 2</title>
<script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<style type="text/css">
table {
border: 1px solid #666;
width: 100%;
}
th {
background: #f8f8f8;
font-weight: bold;
padding: 2px;
}
</style>
</head>
<body>
<!-- Assign Controller to element, it will handle the "data scope" and events of ineer elements -->
<div ng-controller="PeopleCtrl">
<!-- Example of attaching event handler to link click event -->
<p> Click <a ng-click="loadPeople()">here</a> to load data.</p>
<table>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<!-- here is how to receptively render array of object using ng-repeat directive. Note that you have defined people attribute in $scope object, it is bound to this template below -->
<tr ng-repeat="person in people">
<td>{{person.id}}</td> <!-- bind single attribute -->
<td ng-template="{{person.firstName}} {{person.lastName}}"></td> <!-- binding 2 attributes to same element using ng-template directive -->
</tr>
</table>
</div>
<script type="text/javascript">
// define your module (application)
var app = angular.module('myApp', []);
// define controller responsible to get data and bind result to page
function PeopleCtrl($scope, $http) {
$scope.people = []; //this will be used in page template above
// event handler for link which you need to click in order to get data
$scope.loadPeople = function() {
// change link to hit your server json
var httpRequest = $http.get("/link/to/people.json");
// on success of HTTP GET request above handle response and set new data
httpRequest.success(function(data, status) {
$scope.people = data;
});
};
}
</script>
</body>
</html>