使用 Bootstrap 获取后端数据可以通过 AJAX 请求完成，步骤如下：初始化 AJAX 请求；监听服务器响应；打开请求，指定方法（如 GET）和 URL；发送请求；解析服务器响应（JSON 或 XML）；更新 DOM 元素。
如何使用 Bootstrap 获取后端数据
Bootstrap 是一个流行的前端框架，用于创建交互式和响应式 Web 应用程序。虽然 Bootstrap 不会直接提供与后端的连接，但可以通过使用 AJAX（异步 JavaScript 和 XML）请求从后端获取数据。
步骤：
1. 初始化 AJAX 请求
使用 XMLHttpRequest 对象初始化 AJAX 请求。
<code class="javascript">const request = new XMLHttpRequest();</code>
2. 监听服务器响应
使用 onreadystatechange 事件监听服务器响应。
<code class="javascript">request.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 处理服务器响应
}
};</code>3. 打开请求
打开 HTTP 请求，指定方法（例如 GET 或 POST）和 URL。
<code class="javascript">request.open("GET", "your-endpoint-url", true);</code>4. 发送请求
发送 AJAX 请求。
<code class="javascript">request.send();</code>
5. 解析服务器响应
当收到响应时，解析 JSON 或 XML 响应数据。
<code class="javascript">const data = JSON.parse(request.responseText);</code>
6. 更新 DOM
使用从后端获取的数据更新 DOM 元素。
<code class="javascript">document.getElementById("result").innerHTML = data.message;</code>示例：
以下示例演示如何使用 Bootstrap Modal 从后端获取并显示数据。
<code class="html"><!-- Modal 内容 --> <div class="modal-body"> <div id="response-message"></div> </div> <!-- 发送请求按钮 --> <button type="button" class="btn btn-primary" id="submit-button">发送请求</button></code>
<code class="javascript">const modal = new bootstrap.Modal(document.getElementById("modal"));
const responseMessage = document.getElementById("response-message");
const submitButton = document.getElementById("submit-button");
submitButton.addEventListener("click", () => {
// 初始化 AJAX 请求
const request = new XMLHttpRequest();
// 监听服务器响应
request.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 解析服务器响应
const data = JSON.parse(request.responseText);
// 更新 DOM
responseMessage.innerHTML = data.message;
// 显示 Modal
modal.toggle();
}
};
// 打开请求
request.open("GET", "your-endpoint-url", true);
// 发送请求
request.send();
});</code> 
