How to read the content in the database in html

Reading content from a database in HTML involves four steps: sending a request through JavaScript to establish a database connection. Use the onload event handler to parse the response. Parse data based on data type, such as JSON.parse() to parse JSON. Insert the parsed data into the HTML document using the innerHTML or appendChild() method.

How to read the contents of the database in HTML

Reading the contents of the database in HTML involves Following steps:

1. Connect to the database

Use JavaScript's XMLHttpRequest object to establish a connection to the database.

<code class="javascript">const request = new XMLHttpRequest();
request.open("GET", "database.php");
request.send();</code>

2. Handling the response

When receiving a response from the database, use the onload event of the XMLHttpRequest object The handler parses the data.

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

3. Parse data

Parse the data according to the data type returned by the database. For example, if the data is in JSON format, you can use the JSON.parse() method to parse it into a JavaScript object.

<code class="javascript">const dataObject = JSON.parse(data);</code>

4. Using data

After parsing the data, you can use it to update the HTML document. Data can be inserted into HTML elements using the innerHTML or appendChild() methods.

Sample Code

The following is a sample code that demonstrates how to get data from the database and display it in an HTML table:

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

The above is the detailed content of How to read the content in the database in html. For more information, please follow other related articles on the PHP Chinese website!