怎么采用ajax修改数据

发布时间：2023-09-28 13:48:04 所属栏目：教程来源：转载

导读： 　　这篇文章主要介绍“怎么使用ajax修改数据”，在日常操作中，相信很多人在怎么使用ajax修改数据问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解

　　这篇文章主要介绍“怎么使用ajax修改数据”，在日常操作中，相信很多人在怎么使用ajax修改数据问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用ajax修改数据”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　前端代码

　　假设我们有一个列表页面，其中展示了学生的信息，包括姓名、年龄、性别等。现在我们要给每个学生的信息添加一个“编辑”按钮，通过点击该按钮，可以弹出一个模态框，用于修改该学生的信息。

　　首先，我们需要在页面中添加“编辑”按钮。在 HTML 中添加如下代码：

　　<button class="edit-btn" data-id="1">编辑</button>

　　其中，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 请求，并将查询到的数据返回给前端。

　　假设我们使用 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 获取修改后的学生信息。然后，使用数据库更新语句更新该学生的信息，并向前端返回一个成功或失败的消息。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!