使用JavaScript fetch() API时PHP $_GET与$_POST的交互问题

你遇到的核心问题是数据库删除操作未实际执行，导致刷新页面后图片组件重新出现，和$_GET/$_POST的代码顺序无关，是代码里的变量错误、表单参数缺失导致的，以下是具体修复方案：

问题定位 #

1. 表单参数与变量不匹配
   • HTML表单中没有name="image-id"的字段，但PHP删除逻辑里尝试获取$_POST['image-id']，导致$imageId为空，SQL删除条件不成立。
   • PHP中通过URL获取的变量是$boardId，但删除逻辑里误用了未定义的$dbBoardId，导致SQL的board_id参数无效。
2. 服务端响应逻辑不适配fetch请求
   • 服务端执行删除后返回header("Location: ...")跳转，但fetch默认不会自动处理跳转，不过这不是数据未持久化的核心原因。

修复代码 #

1. HTML表单优化 #

确保图片ID和看板ID能正确传递给服务端：

<figure class="removable-image-component">
    <form class="js-fetch-form" method="post">
        <input type="hidden" name="user-id" value="03">
        <!-- 隐藏传递看板ID，避免依赖URL参数 -->
        <input type="hidden" name="board-id" value="<?php echo $boardId; ?>">
        <img src="path/to/image.jpg">
        <!-- 按钮value直接存储图片ID，name用于识别删除操作 -->
        <button class="js-delete-button" name="image-delete" value="52">Remove from board</button>
    </form>
</figure>

2. PHP删除逻辑修复 #

修正变量错误，适配fetch请求返回响应：

// value from URL
if (isset($_GET['board-id']) ) {
    $boardId = $_GET['board-id'];
} else {
    header("Location: login.php");
    exit;
}

// UPDATE BOARD NAME
if(isset($_POST['submit-new-board-name'])) {
    // PDO updates to database
    header("Location: {$wwwRoot}/board.php?board-id={$boardId}"); 
    exit;
}

// DELETE THE BOARD
if (isset($_POST['delete-board'])) {
    // PDO updates to database
    header("Location: {$wwwRoot}/boards?id={$sessionId}"); 
    exit;
}

// REMOVE IMAGE FROM BOARD
if(isset($_POST['image-delete'])) {
    // 从按钮value获取图片ID
    $imageId = $_POST['image-delete'];
    // 使用已定义的$boardId作为看板ID参数
    $stmt = $connection->prepare("DELETE FROM boards_images WHERE board_id = :board_id AND image_id = :image_id");
    $stmt->execute([
        ':board_id' => $boardId,
        ':image_id' => $imageId
    ]);

    // 针对fetch请求返回成功状态，无需跳转
    http_response_code(200);
    echo "删除成功";
    exit;
}

3. JavaScript逻辑优化 #

简化FormData处理，完善错误捕获：

const fetchForms = document.querySelectorAll('.js-fetch-form');

fetchForms.forEach((item) => {
    item.addEventListener('submit', function (e) {
        const submitter = e.submitter;
        if (submitter && submitter.classList.contains('js-delete-button')) {
            e.preventDefault();

            const formData = new FormData(this);
            // 按钮的name和value会自动被FormData包含，无需手动设置

            fetch(window.location.pathname, {
                method: 'post',
                body: formData
            })
            .then(async (response) => {
                if (response.ok) {
                    submitter.closest('.removable-image-component').remove();
                } else {
                    const errorMsg = await response.text();
                    console.error('删除失败:', errorMsg);
                }
            }).catch((error) => {
                console.error('请求出错:', error);
            });
        }
    });
});

额外建议 #

• 开启PDO错误模式便于排查SQL问题：

  $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  

• 给所有POST表单添加CSRF令牌，防止跨站请求伪造：
  在表单中添加<input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">，PHP端验证令牌有效性。

内容的提问来源于stack exchange，提问作者paulo77