PHP AJAX 删除数据后实时更新列表的 3 种高效方法

2024-11-12 07:30:50

PHP AJAX删除数据后更新列表

在使用AJAX提交删除请求并成功删除数据库数据后，如何实时更新页面上的列表是一个常见的问题。本文将提供几种解决方案，并分析其优缺点。

解决方案一：局部刷新

最直接的方案是使用AJAX请求成功后的回调函数，重新获取需要更新的列表HTML片段，并替换原有列表。这种方法实现简单，对后端改动最小。

代码示例：

前端 JavaScript:

document.getElementById("deleteBtn").addEventListener("click", function() {
    // ... 获取选中项代码 ...

    $.ajax({
        type: "POST",
        url: "./_ajax.delete_call.php",
        data: {data : jsonString}, 
        cache: false,
        success: function(){
            // 重新获取列表HTML
            $.get("./_ajax.get_list.php", function(data) {
                $("#memo_list tbody").html(data);
            });
        }
    });
});

后端 PHP (_ajax.get_list.php):

<?php
include_once("./_common.php");

$sql = "SELECT * FROM TABLE WHERE member_id = 'member_id' ORDER BY datetime";
$result = sql_query($sql);

while($row = sql_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['memo'] . "</td>";
    echo "<td><input type="checkbox" name="id" value=\"" . $row['id'] . "\"></td>";
    echo "</tr>";
}

?>

操作步骤：

创建一个新的PHP文件(_ajax.get_list.php)用于生成列表HTML片段。
在AJAX请求成功回调函数中，使用$.get()方法请求_ajax.get_list.php。
将返回的HTML片段替换到页面列表对应的位置。

优点： 简单易实现，兼容性好。

缺点： 网络请求次数增加，效率略低；如果列表数据量很大，传输的数据量也会相应增大。

解决方案二：直接操作DOM

通过JavaScript直接操作DOM元素，删除对应的列表项。这种方法效率较高，避免了额外的网络请求。

代码示例：

前端 JavaScript:

document.getElementById("deleteBtn").addEventListener("click", function() {
  // ... 获取选中项代码 ...

  $.ajax({
      // ... AJAX配置 ...
      success: function(){
          selectedItems.forEach(function(id) {
              $('input[type=checkbox][value=' + id + ']').closest('tr').remove();
          });
      }
  });
});

操作步骤：

在AJAX请求成功回调函数中，遍历已删除的数据ID数组。
通过选择器找到对应的<tr>元素，并使用remove()方法将其从DOM中移除。

优点： 效率高，用户体验更好。

缺点： 代码略微复杂；如果列表渲染逻辑较为复杂，需要进行相应的调整。

解决方案三：返回已删除数据ID

后端返回已删除的数据ID，前端根据ID移除对应的DOM元素。这种方法兼顾了效率和代码简洁性。

代码示例：

后端 PHP (_ajax.delete_call.php):

<?php
// ...
echo json_encode($data); // 返回已删除的ID数组
?>

前端 JavaScript:

$.ajax({
    // ... AJAX配置 ...
    dataType: 'json', // 指定返回数据类型为JSON
    success: function(deletedIds){
        deletedIds.forEach(function(id) {
            $('input[type=checkbox][value=' + id + ']').closest('tr').remove();
        });
    }
});

操作步骤：