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

<?php for ($j = 0; $j < count($requests); $j++): ?>
    <tr id='<?php echo $requests[$j]['request_id'] ?>' class="table-row">
        <?php 
            // 根据请求类型设置显示文本
            $request_type = ($requests[$j]['request_type'] == '1') ? 'candidate' : 'voter';
        ?>
        <td class="school"><?=$request_type?></td>
        <td class="name"><?=$requests[$j]['first_name']?></td>
        <td class="candidates"><?=$requests[$j]['last_name']?></td>
        <td> 
            <button data-type='accept' name="acceptReq" value="req_accepted" type="button" class="btn btn-success">Accept</button> 
        </td>
        <td> 
            <button data-type='deny' name="denyReq" value="req_denied" type="button" class="btn btn-danger">Deny</button> 
        </td>
    </tr>
<?php endfor; ?>

<script>
    // 创建一个FormData对象，用于构建POST请求体
    let fd = new FormData();

    // 选中所有名为"acceptReq"或"denyReq"的按钮，并为它们添加点击事件监听器
    document.querySelectorAll('button[name="acceptReq"],button[name="denyReq"]').forEach(bttn => bttn.addEventListener('click', function(e) {
        // 阻止按钮的默认行为（如果type不是button，则会阻止表单提交）
        e.preventDefault(); 

        // 向上遍历DOM树，找到最近的父级<tr>元素
        let tr = this.parentNode.closest('tr');

        // 从<tr>的id属性获取请求ID
        let requestId = tr.id.trim(); // 使用trim()去除可能的空格
        // 从按钮的data-type属性获取操作类型
        let actionType = this.dataset.type;

        // 设置FormData中的参数
        fd.set('id', requestId);
        fd.set('type', actionType);

        // 使用fetch API发送POST请求
        fetch('../assets/php/accept-requests.inc.php', { 
            method: 'post', 
            body: fd // FormData对象会自动设置正确的Content-Type
        })
        .then(response => {
            // 检查响应是否成功
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.text(); // 解析响应体为文本
        })
        .then(text => {
            // 请求成功后的回调函数
            alert(text); // 弹窗显示服务器返回的信息
            // 在这里可以进一步操作DOM，例如移除已处理的行
            // tr.remove();
        })
        .catch(error => {
            // 捕获请求过程中发生的错误
            console.error('请求失败:', error);
            alert('操作失败，请重试。');
        });
    }));
</script>

<?php
// accept-requests.inc.php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $requestId = $_POST['id'] ?? null;
    $actionType = $_POST['type'] ?? null;

    if ($requestId && $actionType) {
        // 连接数据库（示例，请替换为你的实际数据库连接代码）
        $pdo = new PDO('mysql:host=localhost;dbname=your_database', 'username', 'password');
        $pdo->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请求。";
}
?>

*{
  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;
}