jquery接受json数据并显示table
时间: 2023-08-04 11:05:38 浏览: 95
您可以使用jQuery的`$.ajax()`方法来获取JSON数据,并使用HTML的`<table>`元素来显示数据。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>JSON数据显示为表格</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
$(document).ready(function() {
$.ajax({
url: 'your_data_source_url',
type: 'GET',
dataType: 'json',
success: function(data) {
var tableBody = $('#myTable tbody');
$.each(data, function(index, item) {
var row = $('<tr></tr>');
$('<td></td>').text(item.id).appendTo(row);
$('<td></td>').text(item.name).appendTo(row);
$('<td></td>').text(item.age).appendTo(row);
row.appendTo(tableBody);
});
},
error: function() {
alert('Error loading data.');
}
});
});
</script>
</body>
</html>
```
请将`your_data_source_url`替换为实际的JSON数据源URL。以上示例会将JSON数据中的每个对象显示为表格的一行。您可以根据自己的需求进行修改和样式化。