使用AJAX实现PHP动态表格数据局部更新

<?php
// db.php - 数据库连接配置 (示例，实际项目中应更完善)
function getDbConnection() {
    $dsn = 'mysql:host=localhost;dbname=your_database_name;charset=utf8';
    $user = 'your_username';
    $password = 'your_password';
    try {
        $pdo = new PDO($dsn, $user, $password, [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, // 默认关联数组
        ]);
        return $pdo;
    } catch (PDOException $e) {
        die("数据库连接失败: " . $e->getMessage());
    }
}

function getValues($isArchived = null) {
    $db = getDbConnection();
    $sql = "SELECT personId, lName, fName, mName, suffixName, gender FROM people WHERE 1=1"; // 明确指定列
    $params = [];

    if ($isArchived !== null && ($isArchived === 0 || $isArchived === 1)) {
        $sql .= " AND isArchived = :isArchived";
        $params[':isArchived'] = $isArchived;
    }

    $sql .= " ORDER BY addedAt DESC";

    $stmt = $db->prepare($sql);
    $stmt->execute($params);
    return $stmt->fetchAll(); // 返回所有结果作为关联数组
}
?>

<?php
// fetch_people.php
require_once 'db.php'; // 引入数据库连接和getValues函数

header('Content-Type: application/json'); // 声明返回JSON类型

$isArchived = isset($_POST['isArchived']) ? (int)$_POST['isArchived'] : null;

try {
    $peopleData = getValues($isArchived);
    echo json_encode(['success' => true, 'data' => $peopleData]);
} catch (Exception $e) {
    echo json_encode(['success' => false, 'message' => '数据获取失败: ' . $e->getMessage()]);
}
?>

<!-- HTML 结构示例 -->
<button id="display-active">显示活跃用户</button>
<button id="display-archived">显示已归档用户</button>

<table id="people-table">
    <thead>
        <tr>
            <th>姓氏</th>
            <th>名字</th>
            <!-- ... 其他列 ... -->
        </tr>
    </thead>
    <tbody>
        <!-- 初始数据会在这里 -->
    </tbody>
</table>

$(document).ready(function() {
    // 初始加载数据（可选，如果PHP页面已预填充则不需要）
    // fetchAndDisplayPeople(0); // 默认显示活跃用户

    $('#display-active').click(function() {
        fetchAndDisplayPeople(0); // 0 代表活跃用户
    });

    $('#display-archived').click(function() {
        fetchAndDisplayPeople(1); // 1 代表已归档用户
    });

    function fetchAndDisplayPeople(archivedStatus) {
        $.ajax({
            method: "POST",
            url: "fetch_people.php", // 后端数据接口
            data: { isArchived: archivedStatus }, // 发送归档状态
            dataType: "json", // 期望后端返回JSON数据
            success: function(response) {
                if (response.success) {
                    const people = response.data;
                    const tableBody = $('#people-table tbody');
                    tableBody.html(displayItems(people)); // 替换tbody内容
                } else {
                    console.error("数据获取失败:", response.message);
                    alert("获取数据失败，请稍后再试。");
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error("AJAX请求失败:", textStatus, errorThrown);
                alert("网络请求失败，请检查您的网络连接。");
            }
        });
    }
});

// 生成单个表格行的HTML
function displayItem(item) {
    // 为personId生成一个MD5哈希，以便在inline update中使用
    // 注意：在JS中生成MD5需要引入第三方库，或者直接从后端获取加密后的ID
    // 假设后端已经提供了加密后的ID，或者我们简化处理
    const id = item.personId; // 简化处理，直接使用personId或后端提供的加密ID

    return `
        <tr>
            <td><div contenteditable="true" onBlur="updateValue(this, 'lName', '${id}')" onClick="activate(this)">${item.lName}</div></td>
            <td><div contenteditable="true" onBlur="updateValue(this, 'fName', '${id}')" onClick="activate(this)">${item.fName}</div></td>
            <td>${item.mName}</td>
            <td>${item.suffixName}</td>
            <td>${item.gender}</td>
            <!-- ... 其他列 ... -->
        </tr>
    `;
}

// 生成所有表格行的HTML
function displayItems(items) {
    let output = [];
    for (let item of items) {
        output.push(displayItem(item));
    }
    return output.join(''); // 将数组拼接成一个HTML字符串
}