编写前端 HTML 及 JS 代码进行数据库信息的显示及删除
时间: 2024-03-16 17:45:24 浏览: 14
好的,我可以为您提供一些基本的代码实现。首先,需要使用 HTML 和 JavaScript 来构建 Web 页面,以便在浏览器中显示数据库信息和进行删除操作。以下是一个简单的示例:
```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>
<!-- 引入 jQuery 库 -->
</head>
<body>
<h1>Database Information</h1>
<table id="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tbody">
<!-- 用于显示数据库信息 -->
</tbody>
</table>
<script>
$(document).ready(function(){
// 页面加载完成后执行以下代码
$.ajax({
url: "get_data.php",
type: "GET",
dataType: "json",
success: function(data){
// 获取数据库信息并显示在表格中
$.each(data, function(i, item){
$("#tbody").append("<tr><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.email+"</td><td><button onclick='deleteData("+item.id+")'>Delete</button></td></tr>");
});
},
error: function(){
alert("Error loading data!");
}
});
});
function deleteData(id){
// 删除数据库中的记录
$.ajax({
url: "delete_data.php",
type: "POST",
data: {id: id},
success: function(){
// 删除表格中的对应记录
$("#tbody tr[id='"+id+"']").remove();
},
error: function(){
alert("Error deleting data!");
}
});
}
</script>
</body>
</html>
```
上述代码中,我们使用了 jQuery 库来简化 JavaScript 代码的编写。页面加载时会发送一个 AJAX 请求到 `get_data.php` 页面,获取数据库中的信息,并将其显示在表格中。每个记录的最后一列都有一个删除按钮,点击按钮时会发送一个 AJAX 请求到 `delete_data.php` 页面,从数据库中删除对应的记录,并从表格中删除对应的行。在实际使用时,需要根据具体情况修改代码中的 SQL 语句、数据库连接信息等。