ajax supprimer les données javascript-Questions et réponses frontales-php.cn

ajax supprimer les données javascript

WBOY

Libérer： 2023-05-09 09:16:37

original

707 Les gens l'ont consulté

Avec le développement rapide d'Internet et les progrès continus de la technologie informatique, la technologie ajax est utilisée dans de nombreuses applications Web pour implémenter la fonction d'actualisation partielle, améliorant ainsi l'expérience utilisateur et la vitesse de réponse des pages. Dans certains scénarios où les données doivent être supprimées, ajax peut également être utilisé pour effectuer l'opération de suppression, de sorte qu'il n'est pas nécessaire d'actualiser la page entière et que l'utilisateur peut également voir l'effet de suppression immédiatement sur la page.

Cet article expliquera comment utiliser la technologie javascript et ajax pour supprimer des données.

Première étape : Écrire un fichier HTML

Tout d'abord, créez un fichier HTML localement ou sur le serveur, écrivez le code HTML de base et les styles associés. Définissez un bouton sur la page pour déclencher l'opération de suppression, et chaque entrée de données qui doit être supprimée a un bouton de suppression correspondant. De plus, un tableau de données doit être rendu pour afficher les données, comme indiqué dans le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Ajax删除数据示例</title>
    <style>
      table {
          border-collapse: collapse;
          margin:auto;
      }

      th, td {
        padding: 10px;
        border: 1px solid black;
      }

      button {
          background-color: #4CAF50;
          color: white;
          padding: 10px;
          border: none;
          cursor: pointer;
          margin-top: 15px;
      }

      button:hover {
          opacity: 0.8;
      }
    </style>
  </head>
  <body>
    <h2>Ajax删除数据示例</h2>

    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>zhangsan@gmail.com</td>
          <td><button class="delete" data-id="1">删除</button></td>
        </tr>
        <tr>
          <td>李四</td>
          <td>lisi@gmail.com</td>
          <td><button class="delete" data-id="2">删除</button></td>
        </tr>
        <tr>
          <td>王五</td>
          <td>wangwu@gmail.com</td>
          <td><button class="delete" data-id="3">删除</button></td>
        </tr>
      </tbody>
    </table>

    <button id="delete-all">删除所有数据</button>

    <script src="js/ajax.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous utilisons un tableau de données pour afficher les données, et chaque ligne a un bouton Supprimer, en définissant l'attribut data-id, vous pouvez savoir quelle donnée vous souhaitez supprimer Parmi eux, le bouton Supprimer tout peut supprimer toutes les données à la fois.

Étape 2 : Écrivez du code javascript

Ensuite, introduisez un fichier ajax.js et un fichier main.js dans le fichier HTML, qui sont utilisés pour gérer les requêtes ajax et la page logique d'interaction.

Le code du fichier ajax.js est le suivant :

function ajax(method, url, data, success, error) {
  let xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200 || xhr.status == 304) {
        success(xhr.responseText);
      } else {
        error(xhr.status);
      }
    }
  };
  xhr.send(JSON.stringify(data));
}

Copier après la connexion

Dans le fichier ajax.js, on définit une fonction ajax pour envoyer des requêtes et recevoir des réponses. Parmi eux, method représente la méthode de requête, url représente l'URL demandée, data représente les paramètres de la requête, success représente la fonction de rappel lorsque la requête réussit et error représente la fonction de rappel lorsque la requête échoue. Cette fonction utilise l'objet XMLHttpRequest en interne pour envoyer la requête, définit les paramètres de la requête et la fonction de rappel, et enfin envoie la requête via la méthode d'envoi.

Ce qui suit est le code du fichier main.js, qui est utilisé pour lier les événements des boutons et gérer les interactions des pages :

function deleteData(id) {
  ajax(
    "DELETE",
    "/api/data/" + id,
    {}, // 请求参数
    function(responseText) {
      // 删除成功，刷新页面
      location.reload();
    },
    function(status) {
      // 请求失败
      console.log(status);
    }
  );
}

window.onload = function() {
  let deleteAllBtn = document.querySelector("#delete-all");
  let deleteBtns = document.querySelectorAll(".delete");
  // 删除所有数据
  deleteAllBtn.addEventListener("click", function() {
    ajax(
      "DELETE",
      "/api/data/all",
      {}, // 请求参数
      function(responseText) {
        // 删除成功，刷新页面
        location.reload();
      },
      function(status) {
        // 请求失败
        console.log(status);
      }
    );
  });
  // 删除单个数据
  deleteBtns.forEach(function(btn) {
    btn.addEventListener("click", function() {
      let id = this.getAttribute("data-id");
      deleteData(id);
    });
  });
};

Copier après la connexion

Dans le fichier main.js, nous utilisons window. événement onload pour lier l’événement bouton dans la page. Parmi elles, les méthodes querySelectorAll et forEach sont utilisées respectivement pour obtenir tous les boutons de suppression et supprimer tous les boutons de données, et leur lier des événements de clic. Lorsque l'utilisateur clique sur le bouton Supprimer, la fonction deleteData est appelée, qui envoie une demande DELETE pour supprimer l'entrée de données spécifiée.

Étape 3 : Écrivez le code côté serveur

Enfin, écrivez une interface API RESTful côté serveur pour prendre en charge les opérations de suppression. Étant donné que différents langages et frameworks côté serveur implémentent différentes méthodes, nous fournissons ici uniquement un pseudocode pour référence :

import flask
app = flask.Flask(__name__)

@app.route('/api/data/<int:id>', methods=['DELETE'])
def delete_api(id):
   # 连接数据库并删除指定的数据
   return 'ok'

@app.route('/api/data/all', methods=['DELETE'])
def delete_all_api():
   # 连接数据库并删除所有数据
   return 'ok'

if __name__ == '__main__':
   app.run()

Copier après la connexion

Dans le pseudocode ci-dessus, nous utilisons le framework flask de Python pour créer une interface API simple, dans dont les données à supprimer sont spécifiées via le paramètre id dans la fonction delete_api, et toutes les données sont supprimées dans la fonction delete_all_api. Seul un pseudocode est fourni ici, les lecteurs peuvent écrire du code spécifique côté serveur en fonction de leur situation réelle.

Summary

Cet article explique comment utiliser la technologie javascript et ajax pour supprimer des données, et fournit également un pseudocode basé sur flask pour référence. Dans le développement réel, le code correspondant doit être écrit en fonction de besoins spécifiques, et des problèmes tels que la sécurité, les performances et l'expérience utilisateur doivent être pris en compte. Grâce à l'utilisation raisonnable de la technologie ajax, nous pouvons offrir aux utilisateurs une expérience WEB plus fluide et meilleure, et améliorer notre propre efficacité de développement et la qualité de notre code.

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!