How to read data from database in html

Reading data from the database in HTML involves the following steps: Use the XMLHttpRequest object to establish a connection. Send a SQL query to retrieve the required data. Listen for responses and get data or error messages. Parse the response and convert the data into an HTML usable format such as JSON, XML or text.

How to use HTML to read data from the database

Reading data from the database in HTML involves the following Steps:

1. Establish a connection:

Use the XMLHttpRequest object to send a request to the server and use server-side code (such as PHP, Python or Node.js) to connect to the database.

2. Send query:

Send a SQL query to the database to retrieve the required data. Queries are usually sent using the XMLHttpRequest.send() method.

3. Get response:

The server responds to the query with data or an error message. Use the XMLHttpRequest.onreadystatechange event listener to receive the response.

4. Parse the response:

Parse the response and convert the data into a format usable in HTML. This can be done using JSON, XML or directly as text.

Sample code:

<code class="html"><script>
// 建立连接
var xhr = new XMLHttpRequest();

// 发送查询
var sqlQuery = "SELECT * FROM users";
xhr.open("POST", "server.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("query=" + sqlQuery);

// 监听响应
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // 解析响应
    var data = JSON.parse(xhr.responseText);

    // 使用数据更新 HTML
    var output = "";
    for (var i in data) {
      output += "<p>" + data[i].name + "</p>";
    }
    document.getElementById("result").innerHTML = output;
  }
};
</script></code>

Note: The server-side code is responsible for the actual database interaction and query execution. HTML is used only as a data display layer.

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