html怎麼讀取資料庫中的內容

在 HTML 中讀取資料庫中的內容涉及四個步驟：透過 JavaScript 傳送請求建立資料庫連線。使用 onload 事件處理程序解析回應。根據資料類型解析數據，如 JSON.parse() 解析 JSON。使用 innerHTML 或 appendChild() 方法將解析後的資料插入 HTML 文件。

如何在HTML 中讀取資料庫中的內容

在HTML 中讀取資料庫中的內容涉及以下步驟：

1. 連接到資料庫

使用JavaScript 的XMLHttpRequest 物件建立與資料庫的連線。

const request = new XMLHttpRequest();
request.open("GET", "database.php");
request.send();

2. 處理回應

當收到來自資料庫的回應時，使用XMLHttpRequest 物件的onload 事件處理程序解析資料。

request.onload = function() {
  if (request.status === 200) {
    const data = request.responseText;
    // 解析并使用数据
  }
};

3. 解析資料

根據資料庫傳回的資料類型解析資料。例如，如果資料為 JSON 格式，則可以使用 JSON.parse() 方法將其解析為 JavaScript 物件。

const dataObject = JSON.parse(data);

4. 使用資料

解析資料後，可以使用它來更新 HTML 文件。可以使用 innerHTML 或 appendChild() 方法將資料插入 HTML 元素。

範例程式碼

以下是一個範例程式碼，示範如何從資料庫中取得資料並將其顯示在 HTML 表格中：

<table id="resultTable"></table>

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();

以上是html怎麼讀取資料庫中的內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！