在 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();
2. 处理响应
当收到来自数据库的响应时,使用 XMLHttpRequest
对象的 onload
事件处理程序解析数据。
<code class="javascript">request.onload = function() {
if (request.status === 200) {
const data = request.responseText;
// 解析并使用数据
}
};
3. 解析数据
根据数据库返回的数据类型解析数据。例如,如果数据为 JSON 格式,则可以使用 JSON.parse()
方法将其解析为 JavaScript 对象。
<code class="javascript">const dataObject = JSON.parse(data);
4. 使用数据
解析数据后,可以使用它来更新 HTML 文档。可以使用 innerHTML
或 appendChild()
方法将数据插入 HTML 元素。
示例代码
以下是一个示例代码,演示如何从数据库中获取数据并将其显示在 HTML 表格中:
<code class="html"><table id="resultTable"></table>
<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