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:

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

wobei das Attribut data-id die 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

Als nächstes müssen wir JavaScript-Code schreiben, um der Schaltfläche ein Klickereignis hinzuzufügen. Wenn der Benutzer klickt, öffnen Sie das modale Feld und rufen Sie die Informationen des Schülers vom Server ab. Fügen Sie den folgenden Code in JavaScript hinzu:

rrreee

Im obigen Code erhalten wir zunächst die data-id der Schaltfläche „Bearbeiten“ über $(this).data("id") code> code>-Attribut, das die ID des Studenten ist. Verwenden Sie dann die Methode $.ajax() von jQuery, um eine GET-Anfrage zu senden, um die Informationen des Schülers abzurufen. Geben Sie in der Erfolgsrückruffunktion die Informationen des Schülers in das Modalfeld ein und zeigen Sie das Modalfeld an.

Backend-Code🎜🎜🎜Im Backend-Code müssen wir Ajax-Anfragen verarbeiten und die abgefragten Daten an das Frontend zurückgeben. 🎜🎜Angenommen, wir verwenden Node.js + Express als Back-End-Framework. Ajax-Anfragen können problemlos in Express verarbeitet werden. Zuerst müssen wir eine GET-Route hinzufügen, um Schülerinformationen abzufragen. Fügen Sie den folgenden Code in Express hinzu: 🎜rrreee🎜Im obigen Code erhalten wir zunächst den Studentenausweis über req.params.id. Verwenden Sie dann die Datenbankabfrageanweisung, um die Informationen des Schülers in der Datenbank abzufragen. Wenn die Abfrage fehlschlägt, wird der Statuscode 500 zurückgegeben, der auf einen Serverfehler hinweist. Wenn der Student nicht existiert, wird der Statuscode 404 zurückgegeben, der darauf hinweist, dass der Student nicht existiert. Andernfalls werden die abgefragten Studenteninformationen zurückgegeben als JSON-Objekt an das Frontend. 🎜
🎜Front-End-Code🎜🎜🎜Nachdem der Benutzer die Informationen des Schülers geändert hat, müssen wir die Änderungen auf dem Server speichern. Fügen Sie den folgenden Code in JavaScript hinzu: 🎜rrreee🎜Im obigen Code erhalten wir zunächst die ID des aktuellen Schülers über $(".edit-btn").data("id"). Rufen Sie dann die geänderten Schülerinformationen des Benutzers ab und verwenden Sie die Methode $.ajax() von jQuery, um eine PUT-Anfrage zu senden, um die geänderten Informationen an das Backend zu übergeben. 🎜🎜Im Backend-Code müssen wir eine PUT-Route hinzufügen, um die geänderten Schülerinformationen zu speichern. Fügen Sie den folgenden Code in Express hinzu: 🎜rrreee🎜Im obigen Code erhalten wir zuerst die Studenten-ID über req.params.id und dann die geänderte Version über req.body Code> Studenteninformationen. Verwenden Sie dann eine Datenbankaktualisierungsanweisung, um die Informationen des Schülers zu aktualisieren und eine Erfolgs- oder Fehlermeldung an das Frontend zurückzugeben. 🎜🎜Zusammenfassung: 🎜🎜Durch die obige Code-Implementierung können wir nicht nur eine teilweise Aktualisierung im Front-End erreichen, sondern auch Speichervorgänge im Back-End implementieren. Gleichzeitig können je nach Projektbedarf Vorgänge wie Löschen und Löschen hinzugefügt werden, wodurch die Front-End-Seite interaktiver und die Benutzerbedienung intuitiver wird. 🎜

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!