Comment supprimer des données par lots en JavaScript

Avec le développement continu de la technologie réseau, JavaScript est devenu l'un des langages nécessaires au développement d'applications Web modernes. JavaScript est un langage de programmation orienté objet qui peut être exécuté dans les navigateurs Web, côté serveur et dans les applications mobiles. Lors du développement d'applications Web, nous pouvons rencontrer des situations dans lesquelles nous devons supprimer des données par lots. Cet article explique comment implémenter la suppression par lots de données en JavaScript.

1. Idée de base

Tout d'abord, nous devons comprendre l'idée de base de la suppression de données par lots. Lorsque vous utilisez JavaScript pour supprimer des données par lots, nous devons généralement suivre les étapes suivantes :

1. Obtenir la liste d'identification des données à supprimer
2. Envoyer une demande au serveur et laisser le serveur supprimer les données ; Mettez à jour la page front-end, affichez les données supprimées.
3. Cet article expliquera comment utiliser JavaScript pour supprimer des données par lots sous ces trois aspects.

2. Obtenez la liste d'identification des données à supprimer

Avant de mettre en œuvre la suppression par lots, nous devons déterminer les données à supprimer. De manière générale, nous pouvons sélectionner les données à supprimer sur l'interface frontale, puis enregistrer les identifiants de ces données dans un tableau JavaScript. En JavaScript, vous pouvez utiliser le code suivant pour obtenir les données sélectionnées :

// 获取选择框的所有元素  
var checkBoxList = document.getElementsByName("itemId[]");  
var deleteArray = [];  
// 遍历所有的选择框  
for(var i = 0; i < checkBoxList.length; i ++){  
    // 判断选择框是否被选中  
    if(checkBoxList[i].checked == true){  
        // 将选择框的值添加到数组中  
        deleteArray.push(checkBoxList[i].value);  
    }  
}  
// 将数组转换为字符串  
var deleteIds = deleteArray.join(",");

Dans le code ci-dessus, nous utilisons d'abord la méthode document.getElementsByName pour obtenir tous les éléments de la zone de sélection nommés "itemId[]". Utilisez ensuite un tableau deleteArray pour enregistrer l'ID sélectionné. Lors de l'itération de la zone de sélection, si la zone de sélection est sélectionnée, sa valeur est ajoutée au tableau deleteArray. Enfin, utilisez la méthode join pour convertir le tableau en une chaîne deleteIds séparée par des virgules.

3. Envoyer une demande au serveur

Après avoir obtenu la liste des identifiants des données à supprimer, nous devons envoyer ces identifiants au serveur. Le côté serveur peut utiliser la technologie Ajax pour le traitement et les données supprimées seront supprimées de la base de données. En JavaScript, vous pouvez utiliser le code suivant pour envoyer une requête :

var xmlhttp=new XMLHttpRequest();  
xmlhttp.onreadystatechange=function(){  
    if (xmlhttp.readyState==4 && xmlhttp.status==200){  
        // 在前端页面上删除选中的行  
        var trList = document.getElementsByName("trIds[]");  
        for(var i = 0; i < trList.length; i ++){  
            if(trList[i].style.display != "none"){  
                for(var j = 0; j < deleteArray.length; j ++){  
                    if(trList[i].getAttribute("id") == deleteArray[j]){  
                        trList[i].style.display = "none";  
                        break;  
                    }  
                }  
            }  
        }  
    }  
}  
xmlhttp.open("POST","delete.php",true);  
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xmlhttp.send("deleteIds=" + deleteIds);

Dans le code ci-dessus, nous créons d'abord un objet XMLHttpRequest puis définissons une fonction de rappel. Dans la fonction de rappel, nous pouvons mettre à jour la page front-end pour afficher les données supprimées.

Dans le processus d'envoi de la demande, nous avons utilisé la méthode POST pour enregistrer la liste des identifiants à supprimer dans le paramètre deleteIds. Côté serveur, nous pouvons obtenir ces identifiants en utilisant $_POST['deleteIds']. L'implémentation spécifique de la suppression de données peut utiliser des instructions SQL, telles que :

$deleteIds = $_POST['deleteIds'];  
// 将字符串转换为数组  
$idArray = explode(",", $deleteIds);  
// 构造SQL语句  
$sql = "DELETE FROM table_name WHERE id IN (" . $deleteIds . ")";  
// 执行SQL语句  
mysqli_query($conn, $sql);

4. Mettre à jour la page frontale

Enfin, nous devons mettre à jour la page frontale pour afficher les données supprimées. Après avoir envoyé la demande au serveur, nous pouvons supprimer les lignes sélectionnées de la page pour mettre à jour la page front-end. En JavaScript, la page peut être mise à jour en utilisant le code suivant :

// 在前端页面上删除选中的行  
var trList = document.getElementsByName("trIds[]");  
for(var i = 0; i < trList.length; i ++){  
    if(trList[i].style.display != "none"){  
        for(var j = 0; j < deleteArray.length; j ++){  
            if(trList[i].getAttribute("id") == deleteArray[j]){  
                trList[i].style.display = "none";  
                break;  
            }  
        }  
    }  
}

Dans le code ci-dessus, nous parcourons tous les éléments de ligne du tableau portant le nom "trIds[]". Pendant le processus de parcours, si l'attribut d'affichage de la ligne n'est pas nul, parcourez à nouveau la liste d'ID à supprimer. Si un ID est égal à l'ID de la ligne actuelle, définissez l'attribut d'affichage de la ligne sur aucun pour réaliser la suppression. sur la page d'accueil L'effet de cette ligne.

Résumé

Cet article présente comment implémenter la suppression par lots de données en JavaScript. Plus précisément, nous pouvons réaliser une suppression par lots en obtenant la liste d'ID des données à supprimer, en envoyant une requête côté serveur et en mettant à jour la page frontale. Bien entendu, dans le développement réel, nous devons également prendre en compte plus de détails, tels que la manière de gérer les exceptions, la manière d'effectuer la vérification de sécurité, etc. J'espère que cet article vous sera utile.

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!