利用SQL标签,实现从数据表中获取数据并以表格的形式显示在网页上。运行结果
时间: 2024-02-11 12:09:04 浏览: 113
由于我是一个 AI 语言模型,无法直接运行代码并生成网页,但是我可以提供一个示例代码供您参考。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据表格</title>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
```
JavaScript 代码:
```javascript
const tableBody = document.querySelector('table tbody');
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
let html = '';
data.forEach(function(row) {
html += '<tr>';
html += '<td>' + row.name + '</td>';
html += '<td>' + row.age + '</td>';
html += '<td>' + row.gender + '</td>';
html += '</tr>';
});
tableBody.innerHTML = html;
}
};
xhr.open('GET', 'data.php', true);
xhr.send();
```
PHP 代码:
```php
<?php
$pdo = new PDO('mysql:host=localhost;dbname=database_name;charset=utf8', 'username', 'password');
$statement = $pdo->query('SELECT * FROM table_name');
$rows = $statement->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($rows);
?>
```
这个示例代码会从一个 MySQL 数据库中获取数据,将数据以 JSON 格式返回给前端。前端使用 XMLHttpRequest 对象异步获取数据,然后使用 JavaScript 代码将数据填充到 HTML 表格中。
阅读全文