在 web 开发中，很多时候我们需要修改页面上的数据，使其与后端服务器的数据保持同步。这时候，ajax 技术就可以派上用场了。
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新局部内容的技术。它通过异步通信，将数据传输到服务器并更新页面，从而实现局部刷新的效果。它使用了 JavaScript、XML、CSS 等技术，为现代 Web 开发提供了很多便利。
在 Ajax 技术中，最常用的就是 XmlHttpRequest 对象，可以通过该对象向服务器发送请求，获取数据。同时，JavaScript 中也有很多库可以方便地进行 Ajax 请求，如 jQuery、AngularJS、React 等。
下面我们来看一下如何使用 Ajax 技术，实现页面中的数据修改。
- 前端代码
假设我们有一个列表页面，其中展示了学生的信息，包括姓名、年龄、性别等。现在我们要给每个学生的信息添加一个“编辑”按钮，通过点击该按钮，可以弹出一个模态框，用于修改该学生的信息。
立即学习“Java免费学习笔记（深入）”；
首先，我们需要在页面中添加“编辑”按钮。在 HTML 中添加如下代码：
其中，data-id 属性代表学生的 ID，可以在后续的 Ajax 请求中使用。
接下来，我们需要编写 JavaScript 代码，为按钮添加点击事件，当用户点击时，打开模态框，并从服务器获取该学生的信息。在 JavaScript 中添加如下代码：
// 为按钮添加点击事件
$(".edit-btn").click(function() {
// 获取学生的 ID
var id = $(this).data("id");
// 发送 Ajax 请求，获取学生的信息
$.ajax({
url: "/students/" + id, // 请求的地址
type: "GET", // 请求的方法
success: function(data) { // 请求成功后的回调函数
// 将学生的信息填充到模态框中
$("#name").val(data.name);
$("#age").val(data.age);
$("#gender").val(data.gender);
// 显示模态框
$("#modal").show();
},
error: function() {
alert("获取数据失败，请重试！");
}
});
});上面的代码中，我们首先通过 $(this).data("id") 获取“编辑”按钮的 data-id 属性，即学生的 ID。然后，使用 jQuery 的 $.ajax() 方法发送 GET 请求，获取该学生的信息。在成功回调函数中，将学生的信息填充到模态框中，并显示模态框。
- 后端代码
在后端代码中，我们需要处理 Ajax 请求，并将查询到的数据返回给前端。
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
假设我们使用 Node.js + Express 作为后端框架，在 Express 中可以很方便地处理 Ajax 请求。首先，我们需要添加一个 GET 路由，用于查询学生的信息。在 Express 中添加如下代码：
app.get("/students/:id", function(req, res) {
// 获取学生的 ID
var id = req.params.id;
// 在数据库中查询学生的信息
db.query("SELECT * FROM students WHERE id = ?", [id], function(err, result) {
if (err) {
console.log("查询数据失败：", err);
res.status(500).send("查询数据失败");
} else if (result.length === 0) {
res.status(404).send("学生不存在");
} else {
// 返回学生的信息
res.json(result[0]);
}
});
});上面的代码中，我们首先通过 req.params.id 获取学生的 ID。然后，使用数据库查询语句在数据库中查询该学生的信息。如果查询失败，会返回一个 500 状态码，表示服务器错误；如果学生不存在，会返回一个 404 状态码，表示该学生不存在；否则，将查询到的学生信息作为 JSON 对象返回给前端。
- 前端代码
在用户修改完学生的信息后，我们需要将修改保存到服务器。在 JavaScript 中添加如下代码：
$("#save-btn").click(function() {
// 获取学生的 ID
var id = $(".edit-btn").data("id");
// 获取修改后的学生信息
var name = $("#name").val();
var age = $("#age").val();
var gender = $("#gender").val();
// 发送 Ajax 请求，保存修改后的学生信息
$.ajax({
url: "/students/" + id, // 请求的地址
type: "PUT", // 请求的方法
data: { // 请求的数据
name: name,
age: age,
gender: gender
},
success: function() { // 请求成功后的回调函数
alert("修改成功！");
},
error: function() {
alert("保存数据失败，请重试！");
}
});
});上面的代码中，我们首先通过 $(".edit-btn").data("id") 获取当前学生的 ID。然后，获取用户修改后的学生信息，并使用 jQuery 的 $.ajax() 方法发送 PUT 请求，将修改后的信息传递给后端。
在后端代码中，我们需要添加一个 PUT 路由，用于保存修改后的学生信息。在 Express 中添加如下代码：
app.put("/students/:id", function(req, res) {
// 获取学生的 ID
var id = req.params.id;
// 获取修改后的学生信息
var name = req.body.name;
var age = req.body.age;
var gender = req.body.gender;
// 在数据库中更新学生的信息
db.query("UPDATE students SET name = ?, age = ?, gender = ? WHERE id = ?", [name, age, gender, id], function(err) {
if (err) {
console.log("保存数据失败：", err);
res.status(500).send("保存数据失败");
} else {
res.send("保存数据成功");
}
});
});上面的代码中，我们首先通过 req.params.id 获取学生的 ID，再通过 req.body 获取修改后的学生信息。然后，使用数据库更新语句更新该学生的信息，并向前端返回一个成功或失败的消息。
总结：
通过以上的代码实现，我们不仅可以在前端实现局部刷新，还可以在后端实现保存操作。同时，可以根据项目需要添加删除等操作，使前端页面的交互性更强，让用户的操作更加直观。
