How to delete data in batches in JavaScript

With the continuous development of network technology, JavaScript has become one of the necessary languages ​​​​for modern Web application development. JavaScript is an object-oriented programming language that can be executed in web browsers, server-side, and mobile applications. During the development of web applications, we may encounter situations where we need to delete data in batches. This article will introduce how to implement batch deletion of data in JavaScript.

1. Basic Idea

First of all, we need to understand the basic idea of ​​deleting data in batches. When using JavaScript to delete data in batches, we usually need to complete the following steps:

1. Get the ID list of the data to be deleted;
2. Send a request to the server and let the server Delete these data on the end;
3. Update the front-end page to display the deleted data.

This article will introduce how to use JavaScript to delete data in batches from these three aspects.

2. Obtain the ID list of the data to be deleted

Before implementing batch deletion, we need to determine the data to be deleted. Generally speaking, we can select the data to be deleted on the front-end interface, and then save the IDs of these data into a JavaScript array. In JavaScript, you can use the following code to get the selected data:

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

In the above code, we first use the document.getElementsByName method to get all the selection box elements named "itemId[]". Then use an array deleteArray to save the selected ID. During the iteration of the selection box, if the selection box is selected, its value is added to the deleteArray array. Finally use the join method to convert the array into a comma separated string deleteIds.

3. Send a request to the server

After obtaining the ID list of the data to be deleted, we need to send these IDs to the server. The server side can use Ajax technology for processing, and the deleted data will be deleted from the database. In JavaScript, you can use the following code to send a request:

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

In the above code, we first create an XMLHttpRequest object and then define a callback function. In the callback function, we can update the front-end page to display the deleted data.

In the process of sending the request, we used the POST method to save the list of IDs to be deleted in the deleteIds parameter. On the server side, we can get these IDs using $_POST['deleteIds']. The specific implementation of deleting data can use SQL statements, for example:

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

4. Update the front-end page

Finally, we need to update the front-end page to display the deleted data. After sending the request to the server, we can delete the selected rows from the page to update the front-end page. In JavaScript, the page can be updated using the following code:

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

In the above code, we iterate through all the table row elements with the name "trIds[]". During the traversal process, if the display attribute of the row is not none, traverse the ID list to be deleted again. If an ID is equal to the ID of the current row, set the display attribute of the row to none to achieve deletion on the front-end page. The effect of this line.

Summary

This article introduces how to implement batch deletion of data in JavaScript. Specifically, we can achieve batch deletion by obtaining the ID list of the data to be deleted, sending a request to the server side, and updating the front-end page. Of course, in actual development, we also need to consider more details, such as how to handle exceptions, how to perform security verification, etc. Hope this article is helpful to you.

The above is the detailed content of How to delete data in batches in JavaScript. For more information, please follow other related articles on the PHP Chinese website!