Bootstrap 是一種流行的前端框架,它可以幫助開發(fā)人員更快速地構(gòu)建網(wǎng)站和應(yīng)用程序。當(dāng)您需要從服務(wù)器獲取數(shù)據(jù)時,Bootstrap 可以幫助您使用 AJAX 和 JSON 輕松實現(xiàn)。下面將介紹如何使用 Bootstrap 加載 JSON 數(shù)據(jù)。
首先,在 HTML 文件中引入 jQuery 和 Bootstrap:
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入 Bootstrap -->
<link rel="stylesheet" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
接下來,可以使用 jQuery 中的 $.getJSON() 方法從服務(wù)器獲取 JSON 數(shù)據(jù)。下面是一個從服務(wù)器獲取并顯示數(shù)據(jù)的示例:
<!-- 展示數(shù)據(jù)的 div -->
<div id="result"></div>
<!-- 引入 jQuery 和 Bootstrap 的 JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
// 從服務(wù)器獲取 JSON 數(shù)據(jù)
$.getJSON("example.json", function(data) {
var result = "";
$.each(data, function(key, value) {
// 在 result 中創(chuàng)建一個 div,展示每個數(shù)據(jù)項
result += "<div class='card'>" +
"<div class='card-body'>" +
"<h5 class='card-title'>" + value.title + "</h5>" +
"<p class='card-text'>" + value.content + "</p>" +
"</div>" +
"</div>";
});
// 將所有數(shù)據(jù)項添加到 result 的 div 中
$("#result").html(result);
});
</script>
在該示例代碼中,$.getJSON() 方法從 example.json 文件中獲取數(shù)據(jù)。然后,使用 $.each() 方法遍歷數(shù)據(jù)中的每個項,并為每個項創(chuàng)建一個 Bootstrap 卡片。
最后,將所有卡片添加到 result 的 div 中,使數(shù)據(jù)可見。