跨技术栈数据交互：从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); ?>