Ajax Daten ändern Javascript

Bei der Webentwicklung müssen wir häufig die Daten auf der Seite ändern, um sie mit den Daten auf dem Back-End-Server zu synchronisieren. Zu diesem Zeitpunkt kann die Ajax-Technologie nützlich sein.

Ajax (Asynchronous JavaScript and XML) ist eine Technologie, die Teilinhalte aktualisieren kann, ohne die gesamte Seite neu laden zu müssen. Es überträgt Daten an den Server und aktualisiert die Seite durch asynchrone Kommunikation, wodurch der Effekt einer teilweisen Aktualisierung erzielt wird. Es verwendet JavaScript, XML, CSS und andere Technologien, um der modernen Webentwicklung viel Komfort zu bieten.

In der Ajax-Technologie wird am häufigsten das XmlHttpRequest-Objekt verwendet, mit dem Anforderungen an den Server gesendet und Daten abgerufen werden können. Gleichzeitig gibt es in JavaScript viele Bibliotheken, die Ajax-Anfragen problemlos ausführen können, wie z. B. jQuery, AngularJS, React usw.

Sehen wir uns an, wie Sie die Ajax-Technologie verwenden, um Daten auf der Seite zu ändern.

1. Front-End-Code

Angenommen, wir haben eine Listenseite, auf der Schülerinformationen angezeigt werden, einschließlich Name, Alter, Geschlecht usw. Jetzt müssen wir den Informationen jedes Schülers eine Schaltfläche „Bearbeiten“ hinzufügen. Wenn Sie auf diese Schaltfläche klicken, wird ein modales Feld angezeigt, in dem Sie die Informationen des Schülers ändern können.

Zuerst müssen wir der Seite eine Schaltfläche „Bearbeiten“ hinzufügen. Fügen Sie den folgenden Code in HTML hinzu:

编辑

wobei das Attributdata-iddie ID des Schülers darstellt und in nachfolgenden Ajax-Anfragen verwendet werden kann.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 请求，获取该学生的信息。在成功回调函数中，将学生的信息填充到模态框中，并显示模态框。

2. 后端代码

在后端代码中，我们需要处理 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 对象返回给前端。

3. 前端代码

在用户修改完学生的信息后，我们需要将修改保存到服务器。在 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

rrreee

Das obige ist der detaillierte Inhalt vonAjax Daten ändern Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!