Js实现无刷新删除内容

当我们需要在网页上删除某些内容时，通常会刷新整个页面来刷新页面的内容。但是这种方法会导致用户体验变差，因为用户需要等待页面重载。下面我来详细讲解如何使用JavaScript实现无刷新删除内容。

1. 使用jQuery实现无刷新删除内容

我们可以使用jQuery的$.ajax()方法来删除页面内容。这个方法可以通过异步的方式向服务器发送HTTP请求。具体实现步骤如下：

Step1：编写HTML页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>无刷新删除内容示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <ul id="list">
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
    <li>元素4</li>
  </ul>
  <button id="delete">删除</button>
  <script>
    $('#delete').click(function() {
      $.ajax({
        url: 'delete.php', // 后端处理删除的API接口
        type: 'post',
        data: {
          id: 3 // 被删除元素的id值
        },
        success: function() {
          $('li:eq(2)').remove(); // 删除元素列表中的第三个元素
        }
      });
    });
  </script>
</body>
</html>

Step2：编写后端代码

<?php
$id = $_POST['id'];
// TODO: 从数据库中删除id为$id的元素
?>

在实现的过程中，在 HTML 页面中增加一个 “删除” 按钮，用 id 定义为 delete ，互相对应的后台处理接口是 delete.php 。

当按钮被点击时，我们使用 jQuery 的 $.ajax() 方法向后台接口发送 POST 请求，同时传递要删除的元素的 ID 值。

当后端处理程序执行完要删除指定元素的操作时，$.ajax() 方法会回调 success 函数，我们就可以在函数中完成删除操作。

2. 使用XMLHttpRequest实现无刷新删除内容

除了可以使用jQuery，我们也可以使用原生的XMLHttpRequest对象。相比于jQuery，原生JS 更加轻量级，能够减少页面加载时间。下面是实现方法。

Step1：编写HTML页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>无刷新删除内容示例</title>
</head>
<body>
  <ul id="list">
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
    <li>元素4</li>
  </ul>
  <button id="delete">删除</button>
  <script>
    document.querySelector('#delete').addEventListener('click', function() {
      var xhr = new XMLHttpRequest();
      xhr.open('post', 'delete.php', true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          document.querySelector('li:nth-child(3)').remove(); // 删除元素列表中的第三个元素
        }
      };
      xhr.send('id=3'); // 发送请求，传递要删除的元素的ID值
    });
  </script>
</body>
</html>

Step2：编写后端代码

<?php
$id = $_POST['id'];
// TODO: 从数据库中删除id为$id的元素
?>

在这个示例中，我们先绑定一个点击事件，当按钮被点击时创建一个XMLHttpRequest对象。接下来通过open方法，设置XHR对象的请求方式、请求地址以及是否异步。

当XHR对象的状态发生变化时，我们观察状态码，当状态为4时，说明响应已经返回，同时请求成功。在这个状态下，我们完成删除操作，删除元素列表中的第三个元素。

至此，无刷新删除内容的实现方法已经完整地讲解了，以上两个示例可以直接复制到本地进行测试。值得注意的是，这个方法可以通过修改参数传入到后台进行删除操作，在后端的处理代码中你可以用tools，orm,sql等方式实现删除命令。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Js实现无刷新删除内容 - Python技术站

Js实现无刷新删除内容

1. 使用jQuery实现无刷新删除内容

2. 使用XMLHttpRequest实现无刷新删除内容

相关文章