如何将JavaScript获取的日期选择值传递给PHP并以JSON格式返回
实现方案
前端改造(修改你的setToSelected函数)
你已经在函数内拿到了完整的选中日期参数,只需要新增请求逻辑即可,修改后完整函数参考:
function setToSelected(me){ const x = document.querySelector("span.active"); if (x !== null) { x.classList.remove("active"); } me.className='active'; console.log(me.id); var dateselected=me.id.split('-') var day=dateselected[0].split('_')[0] var daynum=dateselected[0].split('_')[1] var month=dateselected[0].split('_')[2] switch(day){ case 'lun': day='Lundi' break; // 你的其他星期转换逻辑 default: console.log("erreur conversion day") } switch(month){ case 'jan': month='Janvier' break; case 'fev': month='Fevrier' break; // 你的其他月份转换逻辑 default: console.log("erreur conversion month") } document.getElementById("dateselected").innerHTML = "Selected restart date : "+day+" "+daynum+" "+month+" à "+dateselected[1]+"h"; // ========== 新增请求逻辑开始 ========== // 1. 整理要传给后端的参数 const submitData = { raw_id: me.id, day_name: day, day_num: daynum, month_name: month, hour: dateselected[1], display_text: document.getElementById("dateselected").innerText }; // 2. 发送请求到PHP后端 fetch('你的后端接口地址,比如./handle_date.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(submitData) }) .then(res => res.json()) .then(backResult => { // 这里处理后端返回的JSON结果,按需写业务逻辑即可 console.log('后端返回结果:', backResult); }) .catch(err => { console.error('请求失败:', err); }); // ========== 新增请求逻辑结束 ========== }
如果不需要选完日期就自动提交,只需要把上面新增的请求逻辑抽成单独的函数,绑定到提交按钮的点击事件上即可。
后端PHP实现(以handle_date.php为例)
<?php // 设置返回格式为JSON header('Content-Type: application/json; charset=utf-8'); // 前后端跨域的话可以加下面的配置,不需要可以删除 header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: POST'); header('Access-Control-Allow-Headers: Content-Type'); // 接收前端传的JSON参数 $input = file_get_contents('php://input'); $dateInfo = json_decode($input, true); // 业务逻辑处理(示例:参数校验+模拟处理) $response = []; if(empty($dateInfo['day_num']) || empty($dateInfo['month_name']) || empty($dateInfo['hour'])){ $response = [ 'code' => 400, 'msg' => '日期参数缺失', 'data' => null ]; }else{ // 这里写你自己的业务处理逻辑,比如存储到数据库、计算日期差等 $response = [ 'code' => 200, 'msg' => '处理成功', 'data' => [ 'received_date' => $dateInfo['display_text'], // 其他你需要返回的字段 ] ]; } // 返回JSON格式结果 echo json_encode($response); ?>
注意事项
- 优先传递原始可解析的日期参数给后端,不要仅传递展示用的自然语言文本,避免后端解析出错
- 后端必须做参数合法性校验,不要直接使用前端传入的未校验参数
- 也可以用XMLHttpRequest或者jQuery的$.ajax实现请求,核心逻辑和上述方案一致
内容的提问来源于stack exchange,提问作者Django
相关产品推荐
相关产品推荐

