在 HTML 中讀取資料庫中的內容涉及四個步驟：透過 JavaScript 傳送請求建立資料庫連線。使用 onload 事件處理程序解析回應。根據資料類型解析數據，如 JSON.parse() 解析 JSON。使用 innerHTML 或 appendChild() 方法將解析後的資料插入 HTML 文件。
如何在HTML 中讀取資料庫中的內容
在HTML 中讀取資料庫中的內容涉及以下步驟：
1. 連接到資料庫
使用JavaScript 的XMLHttpRequest 物件建立與資料庫的連線。
<code class="javascript">const request = new XMLHttpRequest();
request.open("GET", "database.php");
request.send();</code>2. 處理回應
當收到來自資料庫的回應時，使用XMLHttpRequest 物件的onload 事件處理程序解析資料。
<code class="javascript">request.onload = function() {
if (request.status === 200) {
const data = request.responseText;
// 解析并使用数据
}
};</code>3. 解析資料
根據資料庫傳回的資料類型解析資料。例如，如果資料為 JSON 格式，則可以使用 JSON.parse() 方法將其解析為 JavaScript 物件。
<code class="javascript">const dataObject = JSON.parse(data);</code>
4. 使用資料
解析資料後，可以使用它來更新 HTML 文件。可以使用 innerHTML 或 appendChild() 方法將資料插入 HTML 元素。
範例程式碼
以下是一個範例程式碼，示範如何從資料庫中取得資料並將其顯示在 HTML 表格中：
<code class="html"><table id="resultTable"></table></code>
<code class="javascript">const request = new XMLHttpRequest();
request.open("GET", "database.php");
request.onload = function() {
if (request.status === 200) {
const data = request.responseText;
const dataObject = JSON.parse(data);
// 创建表格行和单元格
for (let i = 0; i < dataObject.length; i++) {
const row = document.createElement("tr");
const cell1 = document.createElement("td");
const cell2 = document.createElement("td");
// 设置单元格内容
cell1.innerHTML = dataObject[i].id;
cell2.innerHTML = dataObject[i].name;
// 添加单元格和行到表格
row.appendChild(cell1);
row.appendChild(cell2);
document.getElementById("resultTable").appendChild(row);
}
}
};
request.send();</code>以上是html怎麼讀取資料庫中的內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！
