JSON文件中的数据渲染到页面（jquery）
要使用jQuery将JSON文件中的数据渲染到页面，你可以使用$.getJSON()方法来获取JSON文件，然后遍历数据并将其插入到HTML中。以下是一个简单的例子：
假设你有一个JSON文件data.json，内容如下：
[
{ "name": "Alice", "age": 25 },
{ "name": "Bob", "age": 30 },
{ "name": "Carol", "age": 22 }
]你希望将这些数据渲染到一个HTML表格中。HTML文件可能如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Data Rendering</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<!-- 数据将被插入此处 -->
</tbody>
</table>
<script>
$(document).ready(function() {
$.getJSON('data.json', function(data) {
var rows = '';
$.each(data, function(index, item) {
rows += '<tr>' +
'<td>' + item.name + '</td>' +
'<td>' + item.age + '</td>' +
'</tr>';
});
$('#data-table tbody').html(rows);
});
});
</script>
</body>
</html>在这个例子中，当页面加载完成后，jQuery会获取data.json文件，然后遍历数据集合，为每个项目创建一个表行（<tr>），并将其插入到表格的<tbody>部分。
评论已关闭