动态表格行操作：使用AJAX实现请求处理与数据库交互

现代解决方案：基于AJAX的异步请求

为了解决传统表单提交的局限性，并提供更流畅的用户体验，推荐使用AJAX（Asynchronous JavaScript and XML）技术。AJAX允许在不刷新整个页面的情况下与服务器进行数据交换，从而实现局部更新。以下将详细介绍如何利用AJAX（特别是现代的 fetch API）来处理动态表格行的操作。

1. HTML结构与数据标识

首先，我们需要调整HTML结构，使其能够清晰地标识每一行数据及其相关的操作。关键在于：

• 为每行 元素设置一个唯一的 id 属性，用于存储该行的 request_id。
• 为操作按钮添加自定义 data-* 属性（例如 data-type="accept" 或 data-type="deny"），以区分不同的操作类型。
• 移除围绕按钮的 标签，因为我们将通过JavaScript来控制提交逻辑。

    ' class="table-row">
        
        
        
        
         
            Accept 
        
         
            Deny 
        
    

注意事项：

• 按钮的 type 属性应设置为 button，以防止其默认提交行为。
• tr 元素的 id 属性值务必唯一，并且不应包含不必要的空格。

2. JavaScript处理：捕获事件与发送AJAX请求

接下来，使用JavaScript来监听按钮点击事件，并发送AJAX请求。我们将利用 fetch API，它提供了一种现代、灵活的方式来发起网络请求。

代码解析：


动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
下载
• FormData 对象：用于构建键值对形式的请求体，非常适合发送表单数据。
• document.querySelectorAll()：选择所有匹配选择器的按钮。
• forEach()：遍历所有选中的按钮，并为每个按钮添加 click 事件监听器。
• e.preventDefault()：阻止按钮的默认行为，确保AJAX请求是唯一的处理方式。
• this.parentNode.closest('tr')：通过事件源（被点击的按钮）向上查找最近的 父元素。
• tr.id.trim()：获取 元素的 id，并使用 trim() 方法去除可能存在的空白字符，确保获取到正确的ID。
• this.dataset.type：获取按钮上 data-type 属性的值。
• fetch()：发起网络请求。method: 'post' 指定为POST请求，body: fd 将 FormData 对象作为请求体发送。
• .then()：处理请求成功后的响应。第一个 .then() 检查HTTP状态码并解析响应体，第二个 .then() 处理解析后的数据。
• .catch()：捕获请求过程中可能发生的网络错误或解析错误。

3. 后端PHP处理：接收数据与数据库操作

在服务器端的 ../assets/php/accept-requests.inc.php 文件中，你可以像处理普通表单提交一样，通过 $_POST 数组访问前端发送过来的数据。

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        try {
            if ($actionType === 'accept') {
                // 执行接受请求的逻辑，例如更新数据库状态
                $stmt = $pdo->prepare("UPDATE requests SET status = 'accepted' WHERE request_id = :id");
                $stmt->execute([':id' => $requestId]);
                echo "请求 {$requestId} 已接受。";
            } elseif ($actionType === 'deny') {
                // 执行拒绝请求的逻辑，例如从数据库中删除或更新状态
                $stmt = $pdo->prepare("DELETE FROM requests WHERE request_id = :id"); // 或者 UPDATE requests SET status = 'denied'
                $stmt->execute([':id' => $requestId]);
                echo "请求 {$requestId} 已拒绝。";
            } else {
                http_response_code(400); // Bad Request
                echo "无效的操作类型。";
            }
        } catch (PDOException $e) {
            http_response_code(500); // Internal Server Error
            echo "数据库操作失败: " . $e->getMessage();
        }
    } else {
        http_response_code(400); // Bad Request
        echo "缺少必要的请求参数。";
    }
} else {
    http_response_code(405); // Method Not Allowed
    echo "只允许POST请求。";
}
?>

注意事项：

• 务必对 $_POST 接收到的数据进行验证和清理，以防止SQL注入等安全问题。
• 使用预处理语句（Prepared Statements）是防止SQL注入的最佳实践。
• 根据操作结果返回适当的HTTP状态码和响应信息，以便前端进行处理。

4. 样式美化 (CSS)

为了提供更好的用户体验，可以添加一些基本的CSS样式，例如按钮悬停效果和表格行的样式。

*{
  transition:ease-in-out all 100ms;
  font-family:monospace
}
th{
  background:rgba(50,50,100,0.5);
  color:white;
}
tr{
  margin:0.25rem;
}
tr:hover td{
  background:rgba(0,200,0,0.25);
}
td,
th{
  margin:0.25rem;
  border:1px dotted rgba(0,0,0,0.3);
  padding:0.45rem
}
button:hover{
  cursor:pointer;
}
[data-type='accept']:hover{
  background:lime
}
[data-type='deny']:hover{
  background:red;
  color:white;
}

总结与最佳实践

通过采用AJAX方法处理动态表格行操作，我们不仅解决了传统表单提交的局限性，还显著提升了用户体验。这种方法的关键在于：

1. 避免手动设置 $_POST： 理解 $_POST 是服务器接收客户端数据的方式，而非在服务器端生成页面时赋值。
2. *利用 `data-属性：** 使用HTML5的data-*` 属性来存储与元素相关的自定义数据，方便JavaScript获取。
3. AJAX异步通信： 采用 fetch API 或其他AJAX库实现无页面刷新的数据交互。
4. 清晰的HTML结构： 为表格行和操作按钮提供明确的标识符，便于JavaScript定位。
5. 前端事件监听与数据提取： JavaScript负责捕获用户操作，从DOM中提取必要的数据。
6. 后端安全处理： PHP脚本负责接收AJAX请求，对数据进行验证、清理，并安全地执行数据库操作。

这种模式在现代Web应用中非常常见，它使得交互更加流畅，提升了整体的用户满意度。