ajax modifier les données javascript

Dans le développement Web, nous devons souvent modifier les données de la page pour les maintenir synchronisées avec les données du serveur back-end. À l’heure actuelle, la technologie Ajax peut s’avérer utile.

Ajax (Asynchronous JavaScript and XML) est une technologie qui permet de mettre à jour un contenu partiel sans recharger la page entière. Il transmet les données au serveur et met à jour la page via une communication asynchrone, obtenant ainsi l'effet d'un rafraîchissement partiel. Il utilise JavaScript, XML, CSS et d'autres technologies pour offrir beaucoup de commodité au développement Web moderne.

Dans la technologie Ajax, le plus couramment utilisé est l'objet XmlHttpRequest, qui peut être utilisé pour envoyer des requêtes au serveur et obtenir des données. Dans le même temps, il existe de nombreuses bibliothèques en JavaScript qui peuvent facilement exécuter des requêtes Ajax, telles que jQuery, AngularJS, React, etc.

Voyons comment utiliser la technologie Ajax pour modifier les données sur la page.

1. Code frontal

Supposons que nous ayons une page de liste qui affiche les informations sur les étudiants, notamment leur nom, leur âge, leur sexe, etc. Nous devons maintenant ajouter un bouton « Modifier » aux informations de chaque élève. En cliquant sur ce bouton, une boîte modale apparaîtra pour modifier les informations de l'élève.

Tout d'abord, nous devons ajouter un bouton "Modifier" à la page. Ajoutez le code suivant en HTML :

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

où l'attribut data-id représente l'identifiant de l'étudiant et peut être utilisé dans les requêtes Ajax ultérieures. 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!