【问题标题】：How to fetch data from SQL table using button and replace the current table?如何使用按钮从 SQL 表中获取数据并替换当前表？
【发布时间】：2021-12-16 06:26:38
【问题描述】：

我的页面已经有一个在进入时使用 select 语句填充的表格

<?php
    $sql = "SELECT * FROM people WHERE isArchived = :zero ORDER BY addedAt DESC";
    $stmt = $db->prepare($sql);
    $stmt->bindValue(":zero", 0);
    $stmt->execute();
?>
-------------------------------------------------------
    <tbody>
    <?php   while ($row = $stmt->fetch()) {
    $id = md5($row['personId']);
    $lName = $row['lName'];
    $fName = $row['fName'];
    $mName = $row['mName'];
    $suffixName = $row['suffixName'];
    $gender = $row['gender'];

//and so on...

我想通过按下一个按钮来显示所有已归档的人（只需将 isArchived 从 0 设置为 1），但我不知道如何重新填充 while 循环（并依次显示新选择的数据）无需重新加载页面，因为每个 td 都有一个允许内联更新的脚本

<td><div contenteditable="true" onBlur="updateValue(this, 'lName', '<?php echo $id;?>')" onClick="activate(this)"><?php echo $lName; ?></div></td>

我试过了，但它不起作用。它到达 PHP 回显，但没有其他任何反应。

$('#display-archived').click(function(){
    $.ajax({
        method: "post",
        url: "selectunarchivedpeople.php",
        data: $('#table').serialize(),
        dataType: "html",
        success: function(php_result) {
            console.log(php_result);
        }
    })
})

$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'];
 //and so on...
    }
    echo "Yup";       
}
else {
    echo "fail";
}

【问题讨论】：

构建一个查询结果数组，建议只选择你想要返回的内容，然后使用$returns = $stmt->fetch_all()，然后从$results创建一个JSON字符串，如$returned = json_encode($results);，然后echo $results;这会将 JSON 字符串返回到 success function(data){ 中 data 变量中的 JS 代码。它将是一个 javscript 对象，您可以对其进行处理以构建新表
或者，让 PHP 在文本变量中构建新的 HTML 表。 echo 到 javascript，然后用简单的 Javascript 将表替换为新表

标签： php jquery sql ajax

【解决方案1】：

您不应该担心内联脚本，而应该担心客户端和服务器端的通信方式。让我们看看零件：

服务器提供信息

你应该有类似的东西：

function getValues($archived = null) {
    $archivedCriteria = "";
    if (($archived === 1) || ($archived === 0)) {
        $achivedCriteria = " AND isArchived = :archived"; //it will have the value of $archived
    }
    //Don't use select *, it's unsafe, because if confidential data ends
    //up being stored in the table, then it will be
    $sql = "SELECT column1, column2, column3 FROM people WHERE 1 = 1 ${$archivedCriteria} ORDER BY addedAt DESC";
    //execute $sql, return an associative array
}

获取请求

当您加载页面时，只需按照您的方式生成 HTML。

发布请求

您应该收到$_POST["archived"] 并调用getValues 传递该值。你的输出应该是json_encoded。

存档/恢复

这些应该是 POST 请求，其中应该传递要归档/恢复的实体的 ID 以及操作类型。此请求应执行更新。

客户端渲染

在客户端为 POST 请求创建一个 function 是有意义的，这样服务器就只关心 GET 请求的结构。该函数如下所示：

function displayItem(item) {
    return `
        Some HTML code where ${item['lName']} and other stuff is displayed
    `;
}

和复数：

function displayItems(items) {
    let output = [];
    for (let item of items) output.push(displayItem[item]);
    return output;
}

因此，每当您执行 POST 请求并接收到一些您打算显示的 JSON 时，只需调用 displayItems 来生成结构。

改变表格结构

您需要找到tbody 的元素并将其innerHTML 替换为您根据displayItems 获得的值。

流程1

你加载页面
GET 请求被发送到服务器
服务器生成 HTML 并将其作为响应发送
客户端显示

流程2

您将视图更改为仅查看存档/恢复的项目
一个 POST 请求被发送到服务器
服务器相应地调用getValues
响应以 JSON 格式返回
客户端调用 displayItems，传递响应
并将tbody 的innerHTML 替换为响应

流程3

您存档/恢复项目
正在向服务器发送 POST 请求
服务器执行更新
服务器响应成功
客户端决定应该显示什么样的视图
从现在开始，请参阅 Flow2

【讨论】：