编写前端 HTML 及 JS 代码进行数据库信息的显示及删除
时间: 2024-03-25 20:39:19 浏览: 20
好的,我可以为您提供一些简单的示例代码,但需要注意的是,由于不清楚您使用的具体数据库和后端语言,这里只提供前端代码的示例。
首先,您需要编写一个 HTML 页面,以便用户可以查看数据库信息和删除数据。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Database Information</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Database Information</h1>
<table id="data">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- 数据将在这里显示 -->
</tbody>
</table>
<script>
// 获取数据并显示在表格中
$(document).ready(function() {
$.ajax({
url: 'get_data.php', // 替换成您的后端代码地址
type: 'GET',
dataType: 'json',
success: function(data) {
$.each(data, function(index, row) {
var tr = '<tr>' +
'<td>' + row.id + '</td>' +
'<td>' + row.name + '</td>' +
'<td>' + row.email + '</td>' +
'<td><button onclick="deleteData(' + row.id + ')">Delete</button></td>' +
'</tr>';
$('#data tbody').append(tr);
});
}
});
});
// 删除数据
function deleteData(id) {
$.ajax({
url: 'delete_data.php', // 替换成您的后端代码地址
type: 'POST',
data: {id: id},
dataType: 'json',
success: function(response) {
if (response.success) {
// 成功删除数据后,将表格中的对应行删除
$('#data tbody tr').filter(function() {
return $(this).find('td:first').text() == id;
}).remove();
} else {
alert('Failed to delete data.');
}
}
});
}
</script>
</body>
</html>
```
在此示例中,我们使用 jQuery 库来发出 AJAX 请求并将返回的数据显示在 HTML 表格中。请注意,我们需要替换两个 URL,一个是获取数据的 URL,另一个是删除数据的 URL。您需要根据您的实际情况进行更改。
接下来,我们需要编写后端代码来处理这些请求。假设您使用的是 PHP 语言,以下是一个简单的示例:
```php
<?php
// 获取数据库连接
$conn = new mysqli('localhost', 'username', 'password', 'database_name');
// 检查连接是否成功
if ($conn->connect_error) {
die('Connection failed: ' . $conn->connect_error);
}
// 处理获取数据的请求
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
$sql = 'SELECT * FROM users';
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
header('Content-Type: application/json');
echo json_encode($data);
}
// 处理删除数据的请求
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$id = $_POST['id'];
$sql = 'DELETE FROM users WHERE id = ' . $id;
$result = $conn->query($sql);
if ($result) {
$response = array('success' => true);
} else {
$response = array('success' => false);
}
header('Content-Type: application/json');
echo json_encode($response);
}
// 关闭数据库连接
$conn->close();
?>
```
在此示例中,我们首先连接到数据库,然后处理两个请求,一个是获取数据的请求,另一个是删除数据的请求。同样,请注意,您需要根据您的实际情况更改数据库连接信息和表名。
希望这些示例代码能够帮助到您!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)