> 백엔드 개발 > PHP 문제 > PHP에서 클릭하여 삭제 팝업 창을 구현하는 방법

PHP에서 클릭하여 삭제 팝업 창을 구현하는 방법

PHPz
풀어 주다: 2023-04-11 09:47:44
원래의
803명이 탐색했습니다.

웹 애플리케이션에 대한 사람들의 의존도가 계속 높아짐에 따라 사용자가 웹 페이지에서 데이터 작업을 수행할 수 있도록 허용해야 하는 필요성이 점점 더 일반화되고 있습니다. 웹페이지에서 삭제 작업을 수행할 때 실수로 중요한 데이터를 삭제하는 것을 방지하기 위해 사용자에게 삭제 확인 팝업창을 표시해야 하는 경우가 많습니다. 이 기능을 구현하기 위해 PHP 언어를 사용할 경우, JavaScript와 결합하여 팝업 삭제 확인 팝업창을 구현하는 방법을 살펴보겠습니다.

먼저 PHP에서 삭제 요청을 처리하는 코드를 작성해야 합니다. 이 예에서는 데이터베이스에서 삭제할 항목을 얻은 다음 삭제를 클릭하면 처리를 위해 PHP 백엔드 프로그램에 삭제 요청을 제출할 수 있다고 가정합니다. PHP 코드는 다음과 같습니다.

<?php
// 获取待删除的数据
$id = $_GET[&#39;id&#39;];

// 处理删除请求
if (isset($id)) {
  // 在这里写下删除数据的代码
}
?>
로그인 후 복사

다음으로 프런트 엔드 페이지에 "삭제" 작업 버튼을 추가하고 해당 버튼을 삭제 처리 스크립트에 연결해야 합니다. 그 전에 JavaScript 코드에서 작업을 용이하게 하기 위해 이 버튼에 클래스를 추가할 수 있습니다. 구체적인 코드는 다음과 같습니다.

<a href="delete.php?id=xxx" class="delete-button">删除</a>
로그인 후 복사

그 중 xxx는 삭제해야 하는 데이터의 고유 식별자로, ID 번호나 기타 표시일 수 있습니다.

다음으로 삭제 확인 팝업창이 뜨도록 자바스크립트 코드를 작성해야 합니다. "Delete" 버튼을 클릭하면 다음 코드가 실행됩니다.

// 获取所有class为“delete-button”的元素
const deleteButtons = document.querySelectorAll(".delete-button");

// 为每个按钮添加点击事件处理程序
deleteButtons.forEach(button => {
  button.addEventListener("click", event => {
    // 阻止默认的链接跳转行为
    event.preventDefault();

    // 弹出删除确认弹窗
    const result = confirm("确认要删除此项数据吗?");
    if (result) {
      // 如果用户确认删除,则跳转到删除处理脚本页面
      location.href = button.href;
    }
  });
});
로그인 후 복사

그 중 먼저 querySelectorAll 함수를 사용하여 "delete-button" 클래스가 있는 모든 요소를 ​​선택하고 deleteButtons 변수에 저장합니다. 다음으로, 사용자가 "삭제" 버튼을 클릭할 때 실행될 각 버튼에 대한 클릭 이벤트 핸들러를 추가합니다. 이 이벤트 핸들러에서는 확인 기능을 사용하여 삭제 확인 팝업 창을 표시합니다. 사용자가 "확인" 버튼을 클릭하면 함수는 true를 반환하고, 그렇지 않으면 false를 반환합니다. 반환 값이 true이면 location.href 속성을 통해 브라우저의 삭제 처리 스크립트 페이지로 이동합니다.

마지막으로 위의 코드를 프론트엔드 페이지에 추가하고, 삭제 버튼을 클릭하면 삭제 확인 팝업창이 팝업되는 기능을 성공적으로 구현했습니다.

요약하자면, PHP와 JavaScript를 함께 사용하면 삭제 확인 팝업창을 쉽게 띄울 수 있습니다. 이 작업을 구현할 때 먼저 삭제 요청을 처리하는 PHP 코드를 작성한 다음 프런트 엔드에서 JavaScript를 사용하여 삭제 확인 팝업 창을 팝업해야 합니다.

위 내용은 PHP에서 클릭하여 삭제 팝업 창을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿