如何获取data-id属性值并通过XMLHttpRequest传递给PHP查询车辆信息

修正实现步骤 #

一、JavaScript代码修改

你需要先在点击事件中获取按钮的data-id属性值，同时调整请求方式和参数传递逻辑，和PHP的接收逻辑匹配：

<script>
const buttons = document.querySelectorAll("[data-id]");
buttons.forEach(button => {
    button.addEventListener("click", loadCarDetails);
});

// 如果你页面上没有id为car-details的元素，下面这行绑定可以直接删除
// document.getElementById('car-details').addEventListener('click', loadCarDetails);

function loadCarDetails(e) {
    // 获取当前点击按钮的data-id值
    const carId = e.currentTarget.dataset.id;
    let xhr = new XMLHttpRequest();
    // 改用POST请求和PHP接收逻辑匹配
    xhr.open('POST', 'getCarDetails.php', true);
    // 设置POST请求头，保证PHP可以正常接收参数
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function () {
        if (this.status == 200) {
            let carDetails = JSON.parse(this.responseText);
            // 修正原代码变量名错误
            console.log(carDetails);
           
            // 后续渲染到页面的逻辑可以在这里编写
            //document.getElementById('car-details').innerHTML = 渲染后的内容;
        }
    }
    // 传递car_id参数
    xhr.send('car_id=' + encodeURIComponent(carId));
}
</script>

二、PHP代码修改

删除冗余操作，修正参数判断和连接拼写错误：

<?php
// 修正连接参数拼写错误，sever改为server，同时替换为你实际的数据库连接信息
$connection = new mysqli("server", "username", "password", "database");
if ($connection->connect_error){
    exit("Error connecting to the database");
}
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$connection->set_charset("utf8mb4");

// 增加参数存在性判断，避免无参数时报错
if(!isset($_POST['car_id']) || !is_numeric($_POST['car_id'])){
    exit(json_encode(['error' => '参数错误']));
}
$car_id = $_POST['car_id'];

// 已经使用预处理语句绑定参数，不需要再手动调用escape_string转义，属于冗余操作直接删除即可
$stmt = $connection->prepare("SELECT car_drivetrain_lookup.drivetrain_type, car_suitability_lookup.car_suitability_type
FROM cars
INNER JOIN car_suitability_lookup ON car_suitability_lookup.lookup_id = cars.car_suitability_id
INNER JOIN car_drivetrain_lookup ON car_drivetrain_lookup.lookup_id = cars.car_drivetrain_id
WHERE cars.car_id = ?");
$stmt->bind_param("i", $car_id);
$stmt->execute();
$result = $stmt->get_result();
// 加上MYSQLI_ASSOC返回关联数组方便前端取值，加上JSON_UNESCAPED_UNICODE避免中文乱码
echo json_encode($result->fetch_all(MYSQLI_ASSOC), JSON_UNESCAPED_UNICODE);
?>

内容的提问来源于stack exchange，提问作者George Austin Bradley