如何正确使用 XMLHttpRequest 发送表单数据并删除数据库记录-php教程-PHP中文网

如何正确使用 XMLHttpRequest 发送表单数据并删除数据库记录

本文详解 XMLHttpRequest POST 请求失败的常见原因，重点解决因请求体格式不匹配（JSON vs application/x-www-form-urlencoded）导致 PHP 无法读取 $_POST 数据的问题，并提供完整、安全的前后端实现方案。

本文详解 xmlhttprequest post 请求失败的常见原因，重点解决因请求体格式不匹配（json vs application/x-www-form-urlencoded）导致 php 无法读取 `$_post` 数据的问题，并提供完整、安全的前后端实现方案。

在使用原生 JavaScript 的 XMLHttpRequest 进行 AJAX 删除操作时，一个高频错误是：前端发送了 JSON 格式的数据（如 JSON.stringify({id: 1})），但后端却错误地尝试从 php://input 流中解析 JSON，而未设置正确的 Content-Type 头；与此同时，PHP 的 $_POST 超全局变量仅在请求头为 application/x-www-form-urlencoded 或 multipart/form-data 时自动填充——这正是本例中始终输出 "error" 的根本原因。

✅ 正确做法：统一使用 application/x-www-form-urlencoded

前端应以 URL 编码格式发送数据，并显式设置请求头：

<div class="deleteButton" onclick="showAllert(this)" id="1">
  <i class="fa-solid fa-trash-can fa-2x" style="color:#A81E22" title="delete"></i>
</div>

<script>
function showAllert(a) {
    const dataId = parseInt(a.getAttribute("id"), 10);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'includes/vehicles/del-veh.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 关键：声明编码类型

    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('删除成功:', xhr.responseText); // 推荐返回 JSON 更健壮
            location.reload();
        } else {
            console.error('删除失败，HTTP 状态码:', xhr.status);
        }
    };

    xhr.onerror = function() {
        console.error('网络请求异常，请检查服务器状态');
    };

    // 使用 URL 编码格式发送（等价于表单提交）
    xhr.send(`id=${encodeURIComponent(dataId)}`);
}
</script>

? 注意：encodeURIComponent() 是必须的，防止 ID 中含特殊字符（如 &, =）破坏参数结构。

✅ 后端 PHP：直接使用 $_POST，更简洁安全

<?php require_once('../../Connections/ukcd.php');

// 直接获取已解析的 POST 参数（无需 json_decode）
$id = $_POST['id'] ?? null;

if (empty($id) || !is_numeric($id)) {
    http_response_code(400);
    echo "error";
    exit;
}

$vehid = (int)$id; // 强制整型转换，防御注入

try {
    $delveh = $ukcd->prepare('DELETE FROM a_ukcd_client_vehicles WHERE clientveh_id = ?');
    $result = $ukcd->execute($delveh, $vehid);

    if ($result) {
        echo "success";
    } else {
        throw new Exception("SQL 执行失败");
    }
} catch (Exception $e) {
    error_log("删除车辆失败: " . $e->getMessage());
    http_response_code(500);
    echo "error";
}

⚠️ 补充建议与最佳实践

不要混用数据格式：若坚持用 JSON 传输，前端需设置 xhr.setRequestHeader('Content-Type', 'application/json')，后端则必须用 json_decode(file_get_contents('php://input'), true)，且确保请求体非空；
增强错误反馈：前端可解析后端返回的 JSON（如 { "status": "success", "message": "已删除" }），提升用户体验；
防重复提交：点击后禁用按钮或添加加载态，避免用户多次触发删除；
权限校验：实际项目中，PHP 端务必验证当前用户是否有权删除该记录（如比对 clientveh_id 所属用户），不可仅依赖前端传参。

通过统一采用标准表单编码格式，配合合理的类型校验与异常处理，即可稳定、安全地完成基于 XMLHttpRequest 的数据删除操作。