Bootstrap是一個流行的前端框架，可以幫助開發人員快速搭建漂亮的響應式網站和應用程序。其中之一的功能就是數據表格，可以方便地展示數據。在本文中，我們將介紹如何使用Bootstrap表格來顯示從服務器端獲取的JSON數據，通過Ajax來獲取數據。

首先，我們需要在HTML頁面中添加一個帶有ID的表格元素，以便我們可以在JavaScript代碼中訪問它。

<table id="myTable" class="table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

接下來，我們可以使用jQuery的$.ajax方法來獲取JSON數據。在這個例子中，我們將后端API的URL硬編碼在JavaScript代碼中。

$.ajax({
url: 'https://example.com/api/data',
dataType: 'json',
success: function(data) {
// 處理數據
}
});

在$.ajax方法的成功回調中，我們可以使用JavaScript循環來逐個添加表格行：

$.ajax({
url: 'https://example.com/api/data',
dataType: 'json',
success: function(data) {
var $tbody = $('#myTable tbody');
$.each(data, function(i, item) {
var $tr = $('<tr>');
$tr.append('<td>' + item.id + '</td>');
$tr.append('<td>' + item.name + '</td>');
$tr.append('<td>' + item.age + '</td>');
$tbody.append($tr);
});
}
});

在這個例子中，我們使用了jQuery的$.each方法來遍歷JSON數據。對于每個數據項，我們創建一個<tr>元素并將其添加到表格的<tbody>中。

最后，我們可以使用Bootstrap表格的一些樣式來使表格更加美觀。例如，我們可以為表頭和表格行添加不同的背景顏色：

.table thead th {
background-color: #333;
color: #fff;
}
.table tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
.table tbody tr:nth-child(even) {
background-color: #e9e9e9;
}

通過這些簡單的步驟，我們可以使用Bootstrap表格來顯示從服務器端獲取的JSON數據。這種方法可以輕松地擴展到其他功能，例如分頁和搜索。