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

Ensuite, nous devons écrire du code JavaScript pour ajouter un événement de clic au bouton. Lorsque l'utilisateur clique, ouvrez la boîte modale et obtenez les informations de l'étudiant sur le serveur. Ajoutez le code suivant en JavaScript :

rrreee

Dans le code ci-dessus, on obtient d'abord le data-id du bouton "Modifier" via $(this).data("id") attribut code> code>, qui est l'identifiant de l'étudiant. Ensuite, utilisez la méthode $.ajax() de jQuery pour envoyer une requête GET afin d'obtenir les informations de l'étudiant. Dans la fonction de rappel de réussite, remplissez les informations de l'étudiant dans la boîte modale et affichez la boîte modale.

Code backend🎜🎜🎜Dans le code backend, nous devons traiter les requêtes Ajax et renvoyer les données interrogées au front-end. 🎜🎜Supposons que nous utilisions Node.js + Express comme framework back-end, les requêtes Ajax peuvent être facilement traitées dans Express. Tout d’abord, nous devons ajouter une route GET pour interroger les informations sur les étudiants. Ajoutez le code suivant dans Express : 🎜rrreee🎜Dans le code ci-dessus, nous obtenons d'abord la pièce d'identité de l'étudiant via req.params.id. Ensuite, utilisez l'instruction de requête de base de données pour interroger les informations de l'étudiant dans la base de données. Si la requête échoue, un code d'état 500 sera renvoyé, indiquant une erreur du serveur ; si l'étudiant n'existe pas, un code d'état 404 sera renvoyé, indiquant que l'étudiant n'existe pas, sinon les informations sur l'étudiant interrogées seront renvoyées ; au front-end en tant qu’objet JSON. 🎜
🎜Code frontal🎜🎜🎜Une fois que l'utilisateur a modifié les informations de l'étudiant, nous devons enregistrer les modifications sur le serveur. Ajoutez le code suivant en JavaScript : 🎜rrreee🎜Dans le code ci-dessus, nous obtenons d'abord l'identifiant de l'étudiant actuel via $(".edit-btn").data("id"). Ensuite, obtenez les informations modifiées sur l'étudiant de l'utilisateur et utilisez la méthode $.ajax() de jQuery pour envoyer une requête PUT afin de transmettre les informations modifiées au backend. 🎜🎜Dans le code backend, nous devons ajouter une route PUT pour enregistrer les informations modifiées sur l'étudiant. Ajoutez le code suivant dans Express : 🎜rrreee🎜Dans le code ci-dessus, nous obtenons d'abord l'identifiant de l'étudiant via req.params.id, puis obtenons la version modifiée via req.body code> informations sur l'étudiant. Ensuite, utilisez une instruction de mise à jour de base de données pour mettre à jour les informations de l'étudiant et renvoyer un message de réussite ou d'échec au frontal. 🎜🎜Résumé : 🎜🎜Grâce à l'implémentation du code ci-dessus, nous pouvons non seulement réaliser une actualisation partielle sur le front-end, mais également implémenter des opérations de sauvegarde sur le back-end. Dans le même temps, des opérations telles que la suppression et la suppression peuvent être ajoutées en fonction des besoins du projet, rendant la page frontale plus interactive et rendant les opérations utilisateur plus intuitives. 🎜

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!