一、概述
html结合ajax实现增删改查
以下是一个简单的HTML结合AJAX实现增删改查的示例：
创建一个index.html文件，用于展示用户列表和提供操作按钮。该页面包含了一个<table>标签，用于展示用户列表的表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User Management</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="userManagement.js"></script>
</head>
<body>
<table id="userTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Operation</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button onclick="addUser()">Add User</button>
</body>
</html>
在上述代码中，首先引入了jQuery库和一个自定义的JavaScript文件userManagement.js。然后使用<table>标签定义了一个表格来展示用户列表，并定义了表头和表体。最后，创建一个按钮Add User，用于触发添加用户的操作。
在userManagement.js文件中，编写以下代码：
$(document).ready(function() {
loadUsers();
});
function loadUsers() {
$.ajax({
url: "/api/users",
type: "GET",
dataType: "json",
success: function(data) {
var table = $("#userTable tbody");
table.empty();
$(data).each(function(index, user) {
var row = "<tr>"
+ "<td>" + user.id + "</td>"
+ "<td>" + user.name + "</td>"
+ "<td>" + user.age + "</td>"
+ "<td>" + user.gender + "</td>"
+ "<td><button onclick='editUser(" + user.id + ")'>Edit</button> "
+ "<button onclick='deleteUser(" + user.id + ")'>Delete</button></td>"
+ "</tr>";
table.append(row);
});
}
});
}
function addUser() {
// TODO: Show a popup modal to input user info and send an AJAX request to add user
}
function editUser(id) {
// TODO: Show a popup modal with the user info and send an AJAX request to update user
}
function deleteUser(id) {
$.ajax({
url: "/api/users/" + id,
type: "DELETE",
success: function() {
alert("User deleted successfully.");
loadUsers();
}
});
}
在上述代码中，首先定义了一个loadUsers()函数，用于向服务器发送AJAX请求，获取用户列表，并将其渲染到页面上。该函数使用jQuery的$.ajax()方法发送GET请求，请求地址为/api/users，返回数据类型为JSON格式。请求成功后，将用户列表渲染到页面的表格中。
另外，还定义了addUser()、editUser()和deleteUser()三个函数，分别用于添加用户、编辑用户和删除用户。在这些函数中，都使用了$.ajax()方法来发送请求，并根据响应结果进行相应的操作。
在服务器端创建一个RESTful API，实现增删改查操作。以下是一个简单的Node.js示例：
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
app.use(express.static("public"));
let users = [
{ id: 1, name: "Alice", age: 20, gender: "female" },
{ id: 2, name: "Bob", age: 25, gender: "male" },
{ id: 3, name: "Charlie", age: 30, gender: "male" }
];
app.get("/api/users", (req, res) => {
res.send(users);
});
app.post("/api/users", (req, res) => {
上述代码演示了如何使用HTML和AJAX结合实现增删改查操作。其中，HTML负责页面的展示和布局，AJAX负责与服务器端进行数据交互和响应处理，通过这样的方式可以实现更加流畅和即时的用户体验。
