Comment utiliser jQuery pour supprimer des données et actualiser la page

En développement web, la suppression de données est un besoin récurrent. Lors du développement avec jQuery, nous pouvons utiliser les méthodes fournies par la bibliothèque pour réaliser cette fonction. Lors de la suppression des données, si la page peut être actualisée à temps, l'effet de la suppression des données peut être mieux démontré. Ce qui suit explique comment utiliser jQuery pour supprimer des données et actualiser la page.

jQuery Supprimer les données

Tout d'abord, nous devons ajouter un bouton "Supprimer" à la page frontale. Ce bouton doit être lié à un événement. Lorsque l'utilisateur clique sur le bouton, l'action de suppression des données sera déclenchée. Ici, nous supposons que nous avons une page de liste contenant plusieurs enregistrements de données. Il y a un bouton « Supprimer » à droite de chaque enregistrement.

Ce qui suit est un exemple de code :

<table>
  <tr>
    <td>数据1</td>
    <td><button class="delete" data-id="1">删除</button></td>
  </tr>
  <tr>
    <td>数据2</td>
    <td><button class="delete" data-id="2">删除</button></td>
  </tr>
  <tr>
    <td>数据3</td>
    <td><button class="delete" data-id="3">删除</button></td>
  </tr>
</table>

<script>
  $(".delete").on("click", function() {
    var id = $(this).data("id"); // 获取数据id
    $.ajax({
      url: "delete_data.php", // 指定删除数据的后端接口
      type: "POST",
      data: { id: id }, // 提交数据id
      success: function(result) {
        alert("数据已删除。");
      },
      error: function() {
        alert("删除数据失败，请稍后再试。");
      }
    });
  });
</script>

Dans le code ci-dessus, nous utilisons le mécanisme de liaison d'événement jQuery pour lier l'événement de clic du bouton "Supprimer". Lorsque l'utilisateur clique sur le bouton, une requête POST asynchrone sera déclenchée, qui enverra un identifiant de données à l'interface backend (delete_data.php) pour indiquer au backend quelle donnée supprimer. Une fois la demande réussie, nous utilisons une simple boîte d'invite d'alerte pour informer l'utilisateur que les données ont été supprimées.

jQuery actualise la page

La requête asynchrone dans le code ci-dessus supprimera uniquement les données de la base de données backend, et les données de la page frontend ne seront pas supprimées immédiatement. Afin d'atteindre l'objectif de suppression des données et d'actualisation de la page à temps, nous devons actualiser manuellement la page après avoir supprimé avec succès les données. Les opérations spécifiques sont les suivantes :

<script>
  $(".delete").on("click", function() {
    var id = $(this).data("id"); // 获取数据id
    $.ajax({
      url: "delete_data.php", // 指定删除数据的后端接口
      type: "POST",
      data: { id: id }, // 提交数据id
      success: function(result) {
        alert("数据已删除。");
        location.reload(); // 刷新页面
      },
      error: function() {
        alert("删除数据失败，请稍后再试。");
      }
    });
  });
</script>

Dans le code ci-dessus, nous utilisons la méthode location.reload() pour actualiser la page après avoir supprimé avec succès les données. Cette méthode amène le navigateur à recharger la page actuelle. De cette façon, lorsque l'utilisateur revient à la page de liste, les données supprimées n'apparaîtront plus dans la liste.

Résumé

Cet article explique comment utiliser jQuery pour supprimer des données et actualiser la page. Jusqu'à présent, nous maîtrisons comment utiliser jQuery pour répondre à cette exigence commune. Bien entendu, dans le développement réel, la situation variera en fonction de la logique métier spécifique. Cependant, les idées et méthodes de base présentées dans cet article peuvent nous fournir une certaine référence pour résoudre des problèmes similaires dans le développement réel.

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!