Bootstrap 綁定 JSON 數據
Bootstrap 是一種流行的前端框架，常用于快速開發漂亮、響應式的網頁。同時，Bootstrap 也提供一些有用的 JavaScript 插件，例如表格、模態框等。
本文將介紹如何在 Bootstrap 中綁定 JSON 數據。我們可以使用 jQuery AJAX 從后端接收 JSON 數據，并將數據渲染到 HTML 頁面上。
下面是一個示例的 JSON 數據：
```
[
{ "name": "John", "age": 25, "city": "New York" },
{ "name": "Jane", "age": 30, "city": "Los Angeles" },
{ "name": "Bob", "age": 40, "city": "Chicago" }
]
```
首先，我們需要一個包含表格的 HTML 頁面，如下所示：
```
```
在頁面加載時，我們使用 jQuery AJAX 請求 JSON 數據。在請求成功后，我們可以使用 jQuery 的 `.each()` 方法來遍歷數據，并使用字符串拼接將數據渲染到表格中。
```
$(document).ready(function() {
$.ajax({
url: 'data.json',
dataType: 'json',
success: function(data) {
var rows = '';
$.each(data, function(index, person) {
rows += '
';
rows += '| ' + person.name + ' | ';
rows += '' + person.age + ' | ';
rows += '' + person.city + ' | ';
rows += '
';
});
$('tbody').html(rows);
}
});
});
```
上述代碼可以在 `pre` 標簽中復制，然后粘貼到 `script` 標簽中。
最后的效果將是一個漂亮的表格，其中包含我們從 JSON 數據中檢索到的姓名、年齡和城市信息。
在 Bootstrap 中綁定 JSON 數據是一個非常有用的技能，但是也需要注意一些點。例如，確保從后端請求數據時使用正確的路徑和文件名。同樣重要的是，確保 HTML 中的表格和數據的屬性、類名等都符合 Bootstrap 的標準。
