Comment créer une boîte de dialogue de suppression en PHP

Lors du développement d'applications Web, dans de nombreux cas, nous devons effectuer certaines opérations, telles que la suppression d'un élément. Cette opération est facile à mettre en œuvre s'il n'y a qu'un bouton supprimer. Cependant, s'il existe de nombreux boutons de suppression et que nous souhaitons que l'utilisateur confirme, une boîte de dialogue de suppression est très utile.

Dans cet article, nous expliquerons comment créer une boîte de dialogue de suppression en PHP.

Étape 1 : Créer un bouton de suppression

Tout d'abord, créons un bouton de suppression qui déclenche la boîte de dialogue de suppression. Nous créons un bouton en utilisant le code HTML comme indiqué ci-dessous :

<button onclick="showDeleteDialog()">删除</button>

L'événement onclick de ce bouton appellera la fonction JavaScript showDeleteDialog(). Nous implémenterons cette fonction en JavaScript plus tard.

Étape 2 : Implémenter la boîte de dialogue de suppression

Nous utilisons du code JavaScript et HTML pour créer une boîte de dialogue de suppression, comme indiqué ci-dessous :

<div id="deleteDialog" style="display:none">
  <p>你确定要删除吗？</p>
  <button onclick="deleteElement()">确定</button>
  <button onclick="hideDeleteDialog()">取消</button>
</div>

Cette boîte de dialogue de suppression se compose d'un paragraphe et de deux boutons. Un bouton est utilisé pour confirmer la suppression et l'autre bouton est utilisé pour annuler la suppression. L'ID de la boîte de dialogue est "deleteDialog" et l'état initial est masqué.

Étape 3 : Implémenter la fonction JavaScript

Maintenant, nous devons implémenter la fonction JavaScript pour afficher la boîte de dialogue de suppression lorsque l'utilisateur clique sur le bouton Supprimer. Nous écrivons la fonction showDeleteDialog() en code JavaScript comme suit :

function showDeleteDialog(){
  document.getElementById("deleteDialog").style.display = "block";
}

Cette fonction obtient l'élément "deleteDialog" via la méthode getElementById() et définit son attribut d'affichage sur "block" pour que la boîte de dialogue soit affichée.

Étape 4 : Implémenter la fonction deleteElement()

Une fois que l'utilisateur a confirmé la suppression, nous devons effectuer l'opération de suppression proprement dite. Nous implémentons la fonction deleteElement() via le code JavaScript et PHP comme suit :

function deleteElement(){
  // 获取要删除的元素ID
  var elementID = "elementID";

  // 发送HTTP请求
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "delete.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      // 删除成功，隐藏对话框
      hideDeleteDialog();
    }
  };
  xhr.send("id=" + elementID);
}

Cette fonction envoie l'ID de l'élément à supprimer au script PHP sur le serveur via la méthode HTTP POST. Lorsque le script PHP supprime avec succès l'élément, la fonction appelle la fonction hideDeleteDialog() pour masquer la boîte de dialogue de suppression.

Étape 5 : Implémenter la fonction hideDeleteDialog()

Enfin, nous devons implémenter la fonction pour masquer la boîte de dialogue de suppression. Nous écrivons la fonction hideDeleteDialog() en code JavaScript comme suit :

function hideDeleteDialog(){
  document.getElementById("deleteDialog").style.display = "none";
}

Cette fonction récupère l'élément "deleteDialog" via la méthode getElementById() et définit son attribut d'affichage sur "none" afin que la boîte de dialogue soit masquée.

À ce stade, nous avons terminé toutes les étapes pour créer une boîte de dialogue de suppression en PHP. Nous utilisons du code HTML pour créer un bouton de suppression qui déclenche la boîte de dialogue de suppression. Implémentez la fonction showDeleteDialog() via le code JavaScript pour afficher la boîte de dialogue de suppression. Une fois que l'utilisateur a cliqué pour confirmer la suppression, nous effectuons l'opération de suppression réelle via la fonction deleteElement() et appelons la fonction hideDeleteDialog() pour masquer la boîte de dialogue de suppression.

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!