跨技术栈数据交互：从JavaScript向PHP发送JSON数据并接收响应

function setToSelected(me) {
    // 移除旧的选中状态，设置新的选中状态
    const x = document.querySelector("span.active");
    if (x !== null) {
        x.classList.remove("active");
    }
    me.className = 'active';

    // 解析日期ID获取日期信息
    var dateselected = me.id.split('-');
    var dayInfo = dateselected[0].split('_');
    var day = dayInfo[0]; // 例如 'lun'
    var dayNum = dayInfo[1]; // 例如 '01'
    var month = dayInfo[2]; // 例如 'jan'
    var time = dateselected[1]; // 例如 '10h'

    // 根据需要进行国际化或格式化
    switch (day) {
        case 'lun': day = 'Lundi'; break;
        // ... 其他日期的转换
        default: console.log("erreur conversion day");
    }
    switch (month) {
        case 'jan': month = 'Janvier'; break;
        case 'fev': month = 'Février'; break;
        // ... 其他月份的转换
        default: console.log("erreur conversion month");
    }

    // 更新前端显示
    document.getElementById("dateselected").innerHTML = "Selected restart date : " + day + " " + dayNum + " " + month + " à " + time + "h";

    // 准备要发送到后端的数据
    var selectedDateString = day + " " + dayNum + " " + month + " " + time + "h";
    // 将数据封装成JavaScript对象
    var dataToSend = {
        "frontendDate": selectedDateString,
        "rawId": me.id // 可以发送原始ID方便后端进一步处理
    };

    // 调用发送函数
    sendDataToPHP(dataToSend);
}

function sendDataToPHP(data) {
    // 设置目标PHP页面URL
    var url = "datereceiver.php";

    // 创建一个新的XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 配置请求：POST方法，目标URL，true表示异步请求
    xhr.open("POST", url, true);

    // 设置请求头，告知服务器我们发送的是JSON数据，并期望接收JSON响应
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.setRequestHeader("Accept", "application/json");

    // 将JavaScript对象转换为JSON字符串发送
    xhr.send(JSON.stringify(data));

    // 监听请求状态变化
    xhr.onreadystatechange = function () {
        // readyState为4表示请求已完成，响应已准备就绪
        if (xhr.readyState === 4) {
            // 检查HTTP状态码，200-299表示成功
            if (xhr.status >= 200 && xhr.status < 300) {
                console.log("Response Status:", xhr.status);
                console.log("Response Text:", xhr.responseText);
                try {
                    // 尝试解析服务器返回的JSON字符串
                    const responseJson = JSON.parse(xhr.responseText);
                    console.log("Parsed JSON Response:", responseJson);
                    // 在此处处理服务器返回的JSON数据，例如更新UI
                    alert("Server Response: " + responseJson.message);
                } catch (e) {
                    console.error("Failed to parse JSON response:", e);
                    alert("Error: Invalid JSON response from server.");
                }
            } else {
                // 请求失败
                console.error("Request failed with status:", xhr.status);
                console.error("Response Text:", xhr.responseText);
                alert("Error: Server responded with status " + xhr.status + ".");
            }
        }
    };
}

<?php
// 始终设置响应头为JSON，确保前端正确解析
header('Content-Type: application/json');

// 检查请求方法是否为POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 获取原始POST数据流（JSON字符串）
    $json_data = file_get_contents('php://input');

    // 将JSON字符串解码为PHP数组（或对象，如果第二个参数为false）
    $data = json_decode($json_data, true); // true表示解码为关联数组

    // 检查JSON解码是否成功，并验证所需参数是否存在
    if (json_last_error() === JSON_ERROR_NONE && isset($data['frontendDate'])) {
        $selectedDate = $data['frontendDate'];
        // 假设还发送了rawId
        $rawId = isset($data['rawId']) ? $data['rawId'] : 'N/A';

        // ----------------------------------------------------
        // 在这里处理你的业务逻辑，例如：
        // - 将 $selectedDate 和 $rawId 存储到数据库
        // - 进行日期相关的计算
        // - 调用其他API等
        // ----------------------------------------------------

        // 示例：构建一个成功的响应
        $response = [
            'status' => 'success',
            'message' => '日期 ' . $selectedDate . ' 已成功接收并处理！',
            'receivedDate' => $selectedDate,
            'receivedRawId' => $rawId,
            'serverTime' => date('Y-m-d H:i:s') // 服务器当前时间
        ];
        http_response_code(200); // 设置HTTP状态码为200 OK
    } else {
        // JSON数据无效或缺少必要参数
        $response = [
            'status' => 'error',
            'message' => '无效的JSON数据或缺少"frontendDate"参数。',
            'errorDetails' => json_last_error_msg()
        ];
        http_response_code(400); // 设置HTTP状态码为400 Bad Request
    }
} else {
    // 请求方法不是POST
    $response = [
        'status' => 'error',
        'message' => '只接受POST请求。'
    ];
    http_response_code(405); // 设置HTTP状态码为405 Method Not Allowed
}

// 将PHP数组编码为JSON字符串并输出
echo json_encode($response);
?>