如何点击按钮从SQL表拉取数据，无需刷新替换当前页面表格

问题根因 #

你现有方案失效有两个核心问题：

• 后端PHP查询到数据后仅返回了固定字符串Yup，没有输出和原页面结构一致的表格行HTML
• 前端AJAX拿到返回结果后仅打印日志，没有替换页面中现有表格的tbody内容

1. 后端接口修改（selectunarchivedpeople.php） #

在循环遍历查询结果时，直接输出和原页面渲染逻辑完全一致的<tr>结构，保证行内编辑的事件绑定可以直接复用：

<?php
// 数据库连接逻辑和原页面保持一致
$sql = "SELECT * FROM people WHERE isArchived = :zero ORDER BY addedAt DESC";
$stmt = $db->prepare($sql);
$stmt->bindValue(":zero", 1);

if($stmt->execute()){
    while ($row = $stmt->fetch()) {
        $id = md5($row['personId']);
        $lName = $row['lName'];
        $fName = $row['fName'];
        $mName = $row['mName'];
        $suffixName = $row['suffixName'];
        $gender = $row['gender'];
        // 其他字段取值和原页面保持一致
        // 输出表格行，结构完全对齐你原页面的写法
        echo '<tr>';
        echo '<td><div contenteditable="true" onBlur="updateValue(this, \'lName\', \''.$id.'\')" onClick="activate(this)">'.$lName.'</div></td>';
        // 剩下的td按照你原页面的结构依次输出，字段和事件绑定都不要改
        echo '</tr>';
    }      
}
else {
    echo '<tr><td colspan="替换为你表格的实际列数">加载归档数据失败</td></tr>';
}
?>

2. 前端代码修改 #

首先给你的表格tbody加一个唯一ID，方便后续替换内容：

<tbody id="peopleTbody">
<!-- 原页面初始渲染的内容保留 -->
</tbody>

修改AJAX逻辑，拿到后端返回的表格行内容后直接替换tbody的原有内容：

$('#display-archived').click(function(){
    $.ajax({
        method: "post",
        url: "selectunarchivedpeople.php",
        dataType: "html",
        success: function(php_result) {
            // 直接替换tbody内容
            $('#peopleTbody').html(php_result);
        },
        error: function() {
            alert('加载数据失败');
        }
    })
})

注：因为你用的是行内事件绑定（onBlur/onClick直接写在元素上），新插入的DOM元素会自动触发绑定的事件，不需要额外重新注册事件，原有行内编辑功能完全可以正常使用。

可选优化：通用查询接口 #

你可以把查询逻辑做成通用接口，通过传参区分查归档/未归档数据，不用维护两个PHP文件：

1. 后端接收参数：

$isArchived = $_POST['is_archived'] ?? 0;
$stmt->bindValue(":zero", $isArchived);

2. 前端切换的时候传对应参数即可：

// 可做切换按钮，点击时切换状态值
let currentStatus = 0;
$('#toggle-archive').click(function(){
    currentStatus = currentStatus === 0 ? 1 : 0;
    $.ajax({
        method: "post",
        url: "getPeople.php",
        data: {is_archived: currentStatus},
        dataType: "html",
        success: function(res) {
            $('#peopleTbody').html(res);
        }
    })
})

内容的提问来源于stack exchange，提问作者inNeedOfHelp