jQuery를 사용하여 데이터를 삭제하고 페이지를 새로 고치는 방법

웹 개발에서는 데이터 삭제가 반복적으로 필요합니다. jQuery로 개발할 때 라이브러리에서 제공하는 메서드를 사용하여 이 기능을 구현할 수 있습니다. 데이터를 삭제하는 동안 페이지를 제때 새로 고칠 수 있다면 데이터 삭제 효과가 더 잘 발휘될 수 있습니다. 다음은 jQuery를 사용하여 데이터를 삭제하고 페이지를 새로 고치는 방법을 소개합니다.

jQuery 데이터 삭제

먼저 프런트 엔드 페이지에 "삭제" 버튼을 추가해야 합니다. 이 버튼은 이벤트에 바인딩되어야 합니다. 사용자가 버튼을 클릭하면 데이터 삭제 작업이 트리거됩니다. 여기서는 여러 데이터 레코드가 포함된 목록 페이지가 있다고 가정합니다. 각 기록의 오른쪽에 "삭제" 버튼이 있습니다.

다음은 샘플 코드입니다.

<table>
  <tr>
    <td>数据1</td>
    <td><button class="delete" data-id="1">删除</button></td>
  </tr>
  <tr>
    <td>数据2</td>
    <td><button class="delete" data-id="2">删除</button></td>
  </tr>
  <tr>
    <td>数据3</td>
    <td><button class="delete" data-id="3">删除</button></td>
  </tr>
</table>

<script>
  $(".delete").on("click", function() {
    var id = $(this).data("id"); // 获取数据id
    $.ajax({
      url: "delete_data.php", // 指定删除数据的后端接口
      type: "POST",
      data: { id: id }, // 提交数据id
      success: function(result) {
        alert("数据已删除。");
      },
      error: function() {
        alert("删除数据失败，请稍后再试。");
      }
    });
  });
</script>

위 코드에서는 jQuery 이벤트 바인딩 메커니즘을 사용하여 "삭제" 버튼의 클릭 이벤트를 바인딩했습니다. 사용자가 버튼을 클릭하면 비동기 POST 요청이 트리거되어 백엔드 인터페이스(delete_data.php)에 데이터 ID를 보내 삭제할 데이터 조각을 백엔드에 알려줍니다. 요청이 성공하면 간단한 경고 메시지 상자를 사용하여 사용자에게 데이터가 삭제되었음을 알리는 메시지를 표시합니다.

jQuery는 페이지를 새로 고칩니다

위 코드의 비동기 요청은 백엔드 데이터베이스의 데이터만 삭제하고 프런트엔드 페이지의 데이터는 즉시 삭제되지 않습니다. 데이터를 삭제하고 페이지를 적시에 새로 고치는 목적을 달성하려면 데이터를 성공적으로 삭제한 후 페이지를 수동으로 새로 고쳐야 합니다. 구체적인 작업은 다음과 같습니다.

<script>
  $(".delete").on("click", function() {
    var id = $(this).data("id"); // 获取数据id
    $.ajax({
      url: "delete_data.php", // 指定删除数据的后端接口
      type: "POST",
      data: { id: id }, // 提交数据id
      success: function(result) {
        alert("数据已删除。");
        location.reload(); // 刷新页面
      },
      error: function() {
        alert("删除数据失败，请稍后再试。");
      }
    });
  });
</script>

위 코드에서는 데이터를 성공적으로 삭제한 후 location.reload() 메서드를 사용하여 페이지를 새로 고칩니다. 이 메서드를 사용하면 브라우저가 현재 페이지를 다시 로드합니다. 이런 방식으로 사용자가 목록 페이지로 돌아오면 삭제된 데이터는 더 이상 목록에 표시되지 않습니다.

요약

이 문서에서는 jQuery를 사용하여 데이터를 삭제하고 페이지를 새로 고치는 방법을 설명합니다. 지금까지 우리는 jQuery를 사용하여 이 공통 요구 사항을 완료하는 방법을 마스터했습니다. 물론 실제 개발에서는 특정 비즈니스 로직에 따라 상황이 달라질 수 있습니다. 그러나 이 기사에서 소개된 기본 아이디어와 방법은 실제 개발에서 유사한 문제를 해결하는 데 특정 참조 의미를 제공할 수 있습니다.

위 내용은 jQuery를 사용하여 데이터를 삭제하고 페이지를 새로 고치는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!