JavaScript에서 데이터를 일괄 삭제하는 방법

네트워크 기술의 지속적인 발전으로 JavaScript는 현대 웹 애플리케이션 개발에 필요한 언어 중 하나가 되었습니다. JavaScript는 웹 브라우저, 서버 측 및 모바일 애플리케이션에서 실행될 수 있는 객체 지향 프로그래밍 언어입니다. 웹 애플리케이션을 개발하는 동안 데이터를 일괄 삭제해야 하는 상황이 발생할 수 있습니다. 이 기사에서는 JavaScript로 데이터 일괄 삭제를 구현하는 방법을 소개합니다.

1. 기본 개념

우선, 데이터를 일괄 삭제하는 기본 개념을 이해해야 합니다. JavaScript를 사용하여 일괄적으로 데이터를 삭제하는 경우 일반적으로 다음 단계를 완료해야 합니다.

1. 삭제할 데이터의 ID 목록을 가져옵니다.
2. 서버에 요청을 보내고 서버가 데이터를 삭제하도록 합니다. 프런트 엔드 페이지를 업데이트하고 삭제된 데이터를 표시합니다.
3. 이 기사에서는 이 세 가지 측면에서 JavaScript를 사용하여 데이터를 일괄 삭제하는 방법을 소개합니다.

2. 삭제할 데이터의 ID 목록 가져오기

일괄 삭제를 구현하기 전에 삭제할 데이터를 결정해야 합니다. 일반적으로 프런트 엔드 인터페이스에서 삭제할 데이터를 선택한 다음 이러한 데이터의 ID를 JavaScript 배열에 저장할 수 있습니다. JavaScript에서는 다음 코드를 사용하여 선택한 데이터를 가져올 수 있습니다.

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

위 코드에서는 먼저 document.getElementsByName 메서드를 사용하여 "itemId[]"라는 이름의 모든 선택 상자 요소를 가져옵니다. 그런 다음 deleteArray 배열을 사용하여 선택한 ID를 저장합니다. 선택 상자를 반복하는 동안 선택 상자가 선택되면 해당 값이 deleteArray 배열에 추가됩니다. 마지막으로 조인 메소드를 사용하여 배열을 쉼표로 구분된 문자열 deleteId로 변환합니다.

3. 서버에 요청 보내기

삭제할 데이터의 ID 목록을 얻은 후 해당 ID를 서버에 보내야 합니다. 서버측에서는 Ajax 기술을 이용하여 처리할 수 있으며, 삭제된 데이터는 데이터베이스에서 삭제됩니다. JavaScript에서는 다음 코드를 사용하여 요청을 보낼 수 있습니다.

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

위 코드에서는 먼저 XMLHttpRequest 객체를 만든 다음 콜백 함수를 정의합니다. 콜백 함수에서 프런트엔드 페이지를 업데이트하여 삭제된 데이터를 표시할 수 있습니다.

요청을 보내는 과정에서 POST 메소드를 사용하여 삭제할 ID 목록을 deleteIds 매개변수에 저장했습니다. 서버 측에서는 $_POST['deleteIds']를 사용하여 이러한 ID를 얻을 수 있습니다. 데이터 삭제의 구체적인 구현에는 다음과 같은 SQL 문을 사용할 수 있습니다.

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

4. 프런트 엔드 페이지 업데이트

마지막으로 삭제된 데이터를 표시하려면 프런트 엔드 페이지를 업데이트해야 합니다. 서버에 요청을 보낸 후 페이지에서 선택한 행을 삭제하여 프런트 엔드 페이지를 업데이트할 수 있습니다. JavaScript에서는 다음 코드를 사용하여 페이지를 업데이트할 수 있습니다.

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

위 코드에서는 이름이 "trIds[]"인 모든 테이블 행 요소를 반복합니다. 순회 과정에서 행의 표시 속성이 없음이 아닌 경우 삭제하려는 ID 목록을 다시 순회합니다. ID가 현재 행의 ID와 동일하면 해당 행의 표시 속성을 없음으로 설정하여 삭제합니다. 이 줄의 효과.

요약

이 글에서는 자바스크립트로 데이터 일괄 삭제를 구현하는 방법을 소개합니다. 구체적으로, 삭제할 데이터의 ID 목록을 얻고, 서버 측에 요청을 보내고, 프런트 엔드 페이지를 업데이트함으로써 일괄 삭제를 수행할 수 있습니다. 물론 실제 개발에서는 예외 처리 방법, 보안 검증 수행 방법 등 더 자세한 사항도 고려해야 합니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 JavaScript에서 데이터를 일괄 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!