时间戳

首页 > 解决方案 > 如何使用按钮从 SQL 表中获取数据并替换当前表？

php - 如何使用按钮从 SQL 表中获取数据并替换当前表？

问题描述

我的页面在输入时已经使用 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";
}

标签： phpjquerysqlajax

解决方案

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

提供信息的服务器

你应该有类似的东西：

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，传递响应
  • 并替换响应innerHTML的tbody

流3

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

推荐阅读