使用 Bootstrap 讀取 JSON
Bootstrap 是一個流行的前端開發框架，它可以幫助我們輕松地構建響應式網站和應用程序。其中一項強大的功能是支持通過 AJAX 讀取 JSON 數據并在頁面上動態渲染。以下是一個簡單的例子：
HTML 代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Bootstrap Read JSON</title> <!-- 引入 Bootstrap 樣式 --> <link rel="stylesheet" > </head> <body> <div class="container"> <h1>Bootstrap Read JSON</h1> <ul id="json-data"></ul> </div> <!-- 引入 jQuery.js --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <!-- 引入 Bootstrap.js --> <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <!-- 引入加載數據的腳本 --> <script src="./json.js"></script> </body> </html>首先，我們聲明了一個包含一個空列表的 HTML 頁面。這個列表將成為我們加載 JSON 數據后渲染的地方。我們還導入了 Bootstrap 樣式和所需的 JavaScript 庫。 JavaScript 代碼 下面是我們將在 json.js 文件中編寫的 JavaScript 代碼：
$(document).ready(function() {
$.getJSON('./data.json', function(data) {
$.each(data, function(index, item) {
$('#json-data').append('<li>' + item.name + ' - ' + item.email + '</li>');
});
});
});我們使用 jQuery 的 `$.getJSON()` 方法來讀取存儲在 data.json 文件中的數據。每個項都包含一個名稱和電子郵件地址。在讀取 JSON 數據后，我們使用 `$.each()` 方法來遍歷每個項目，然后將其添加到列表中。
我們將這段代碼保存在 json.js 文件中，并在 HTML 中包含它。
運行結果
當打開我們的 HTML 頁面時，它將自動讀取 JSON 數據并在列表中顯示如下所示：Bootstrap Read JSON
- John Smith - john.smith@example.com
- Jane Doe - jane.doe@example.com
- Bob Johnson - bob.johnson@example.com