So löschen Sie Daten stapelweise in JavaScript

Mit der kontinuierlichen Weiterentwicklung der Netzwerktechnologie ist JavaScript zu einer der notwendigen Sprachen für die moderne Webanwendungsentwicklung geworden. JavaScript ist eine objektorientierte Programmiersprache, die in Webbrowsern, serverseitigen und mobilen Anwendungen ausgeführt werden kann. Bei der Entwicklung von Webanwendungen kann es vorkommen, dass wir Daten stapelweise löschen müssen. In diesem Artikel wird erläutert, wie Sie die Stapellöschung von Daten in JavaScript implementieren.

1. Grundidee

Zunächst müssen wir die Grundidee des stapelweisen Löschens von Daten verstehen. Wenn wir JavaScript verwenden, um Daten stapelweise zu löschen, müssen wir normalerweise die folgenden Schritte ausführen:

1. Rufen Sie die ID-Liste der zu löschenden Daten ab.
2. Senden Sie eine Anfrage an den Server und lassen Sie den Server die Daten löschen Aktualisieren Sie die Frontend-Seite und zeigen Sie die gelöschten Daten an.
3. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript Daten stapelweise unter diesen drei Aspekten löschen.

2. Holen Sie sich die ID-Liste der zu löschenden Daten

Bevor wir die Stapellöschung durchführen, müssen wir die zu löschenden Daten ermitteln. Im Allgemeinen können wir die zu löschenden Daten auf der Front-End-Schnittstelle auswählen und dann die IDs dieser Daten in einem JavaScript-Array speichern. In JavaScript können Sie den folgenden Code verwenden, um die ausgewählten Daten abzurufen:

// 获取选择框的所有元素  
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(",");

Im obigen Code verwenden wir zunächst die Methode document.getElementsByName, um alle Auswahlfeldelemente mit dem Namen „itemId[]“ abzurufen. Verwenden Sie dann ein Array deleteArray, um die ausgewählte ID zu speichern. Wenn während der Iteration des Auswahlfelds das Auswahlfeld ausgewählt ist, wird sein Wert zum deleteArray-Array hinzugefügt. Verwenden Sie abschließend die Join-Methode, um das Array in eine durch Kommas getrennte Zeichenfolge „deleteIds“ umzuwandeln.

3. Senden Sie eine Anfrage an den Server

Nachdem wir die ID-Liste der zu löschenden Daten erhalten haben, müssen wir diese IDs an den Server senden. Die Serverseite kann die Ajax-Technologie zur Verarbeitung verwenden und die gelöschten Daten werden aus der Datenbank gelöscht. In JavaScript können Sie den folgenden Code verwenden, um eine Anfrage zu senden:

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);

Im obigen Code erstellen wir zunächst ein XMLHttpRequest-Objekt und definieren dann eine Rückruffunktion. In der Rückruffunktion können wir die Front-End-Seite aktualisieren, um die gelöschten Daten anzuzeigen.

Beim Senden der Anfrage haben wir die POST-Methode verwendet, um die Liste der zu löschenden IDs im Parameter deleteIds zu speichern. Auf der Serverseite können wir diese IDs mit $_POST['deleteIds'] abrufen. Die spezifische Implementierung des Löschens von Daten kann SQL-Anweisungen verwenden, wie zum Beispiel:

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

4. Aktualisieren Sie die Front-End-Seite

Schließlich müssen wir die Front-End-Seite aktualisieren, um die gelöschten Daten anzuzeigen. Nachdem wir die Anfrage an den Server gesendet haben, können wir die ausgewählten Zeilen von der Seite löschen, um die Frontend-Seite zu aktualisieren. In JavaScript kann die Seite mit dem folgenden Code aktualisiert werden:

// 在前端页面上删除选中的行  
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;  
            }  
        }  
    }  
}

Im obigen Code durchlaufen wir alle Tabellenzeilenelemente mit dem Namen „trIds[]“. Wenn das Anzeigeattribut der Zeile während des Durchlaufvorgangs nicht „none“ ist, durchlaufen Sie die zu löschende ID-Liste erneut. Wenn eine ID mit der ID der aktuellen Zeile übereinstimmt, setzen Sie das Anzeigeattribut der Zeile auf „none“, um die Löschung zu erreichen auf der Startseite.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie die Stapellöschung von Daten in JavaScript implementieren. Insbesondere können wir eine Stapellöschung erreichen, indem wir die ID-Liste der zu löschenden Daten abrufen, eine Anfrage an den Server senden und die Front-End-Seite aktualisieren. Natürlich müssen wir in der tatsächlichen Entwicklung auch weitere Details berücksichtigen, z. B. den Umgang mit Ausnahmen, die Durchführung der Sicherheitsüberprüfung usw. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonSo löschen Sie Daten stapelweise in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!