So lesen Sie den Inhalt der Datenbank in HTML

Das Lesen des Inhalts der Datenbank in HTML umfasst vier Schritte: Senden einer Anfrage über JavaScript, um eine Datenbankverbindung herzustellen. Verwenden Sie den Onload-Ereignishandler, um die Antwort zu analysieren. Analysieren Sie Daten basierend auf dem Datentyp, z. B. JSON.parse(), um JSON zu analysieren. Fügen Sie die analysierten Daten mithilfe der innerHTML- oder appendChild()-Methode in das HTML-Dokument ein.

So lesen Sie den Inhalt der Datenbank in HTML

Das Lesen des Inhalts der Datenbank in HTML umfasst die folgenden Schritte:

1. Stellen Sie eine Verbindung zur Datenbank her

Verwenden Sie den von JavaScript Das XMLHttpRequest-Objekt stellt eine Verbindung zur Datenbank her. 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()

<code class="html"><table id="resultTable"></table></code>

2. Verarbeiten der Antwort

Wenn eine Antwort von der Datenbank empfangen wird, verwenden Sie den onload-Ereignishandler des XMLHttpRequest-Objekts, um die Daten zu analysieren.

<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>

🎜3. Daten analysieren🎜🎜🎜Daten entsprechend dem von der Datenbank zurückgegebenen Datentyp analysieren. Wenn die Daten beispielsweise im JSON-Format vorliegen, können Sie sie mit der Methode JSON.parse() in ein JavaScript-Objekt analysieren. 🎜rrreee🎜🎜4. Daten verwenden🎜🎜🎜Nachdem Sie die Daten analysiert haben, können Sie sie zum Aktualisieren des HTML-Dokuments verwenden. Daten können mit den Methoden innerHTML oder appendChild() in HTML-Elemente eingefügt werden. 🎜🎜🎜Beispielcode🎜🎜🎜Hier ist ein Beispielcode, der zeigt, wie man Daten aus einer Datenbank abruft und in einer HTML-Tabelle anzeigt: 🎜rrreeerrreee

Das obige ist der detaillierte Inhalt vonSo lesen Sie den Inhalt der Datenbank in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!