How to use jQuery to delete data and refresh the page

In web development, deleting data is a frequently occurring requirement. When developing with jQuery, we can use the methods provided by the library to achieve this function. While deleting data, if the page can be refreshed in time, the effect of deleting data can be better demonstrated. The following will introduce how to use jQuery to delete data and refresh the page.

jQuery Delete Data

First, we need to add a "Delete" button to the front-end page. This button needs to be bound to an event. When the user clicks the button, the action of deleting the data will be triggered. Here, we assume that we have a list page containing multiple data records. There is a "Delete" button to the right of each record.

The following is a sample code:

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

In the above code, we use the jQuery event binding mechanism to bind the click event of the "Delete" button. When the user clicks the button, an asynchronous POST request will be triggered, which will send a data id to the backend interface (delete_data.php) to tell the backend which piece of data to delete. After the request is successful, we use a simple alert prompt box to prompt the user that the data has been deleted.

jQuery Refresh Page

The asynchronous request in the above code will only delete the data in the back-end database, and the data on the front-end page will not be deleted immediately. In order to achieve the purpose of deleting data and refreshing the page in time, we need to manually refresh the page after successfully deleting the data. The specific operations are as follows:

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

In the above code, we use the location.reload() method to refresh the page after successfully deleting the data. This method causes the browser to reload the current page. In this way, when the user returns to the list page, the deleted data will no longer appear in the list.

Summary

This article introduces how to use jQuery to delete data and refresh the page. So far, we have mastered how to use jQuery to complete this common requirement. Of course, in actual development, the situation will vary depending on the specific business logic. However, the basic ideas and methods introduced in this article can provide certain reference significance for us to solve similar problems in actual development.

The above is the detailed content of How to use jQuery to delete data and refresh the page. For more information, please follow other related articles on the PHP Chinese website!