jQuery向PHP传参并设置Cookie时的显示问题及解决

最近碰到个AJAX传值的小坑，控制台明明显示请求成功，但后端页面就是拿不到数据，折腾了一会儿终于找到问题所在，分享下解决方案：

我在页面Document Ready时执行一段JS代码，从页面元素中获取日期值（示例值：12 maart 2020），通过AJAX POST请求发送到datum.php，打算把日期存到Cookie里。结果控制台打印了成功日志，但访问datum.php时只显示Date is: ，完全看不到预期的日期内容。

初始前端JS代码 #

$(document).ready(function() {
  setTimeout( function() { 
    var datum_hoofdafspraak = $(".bookly-cart-primary td:nth-child(2)").html(); 
    console.log(datum_hoofdafspraak); // 正常输出日期字符串
    $.ajax({ 
      type: 'POST', 
      url: '/datum.php', 
      data: datum_hoofdafspraak, // 这里是核心问题
      dataType: 'text', 
      success: function() { 
        console.log("Datum sent to datum.php"); 
      }, 
    }); 
  }, 500);
});

后端datum.php代码 #

<?php session_start(); 
// Check if request method is post 
if ($_SERVER['REQUEST_METHOD'] === 'POST') { 
  foreach ($_POST as $key => $value) { 
    // 自定义Cookie键名
    switch ($key) { 
      case 'datum': 
        $cookie_key = 'ingevoerde_datum'; 
        break; 
      default: 
        $cookie_key = $key; 
        break; 
    } 
    // 设置有效期半小时的Cookie
    setcookie($cookie_key, $value, time()+1800*1, "/"); 
  } 
} 
echo "Date is: " . $_COOKIE['ingevoerde_datum']; 
?>

前端AJAX的data参数直接传了一个字符串，没有指定对应的键名。这会导致后端$_POST数组里的键是一个空字符串（或者默认的占位键），根本匹配不到PHP代码里switch分支的'datum' case，自然就不会设置ingevoerde_datum这个Cookie，最后页面输出时当然拿不到值。

把AJAX的data参数改成键值对对象，明确指定键名为datum，这样后端就能正确识别并匹配到对应的分支：

// 修正后的data参数
data: { datum: datum_hoofdafspraak },

完整的修正后JS代码：

$(document).ready(function() {
  setTimeout( function() { 
    var datum_hoofdafspraak = $(".bookly-cart-primary td:nth-child(2)").html(); 
    console.log(datum_hoofdafspraak); 
    $.ajax({ 
      type: 'POST', 
      url: '/datum.php', 
      data: { datum: datum_hoofdafspraak }, // 已修复
      dataType: 'text', 
      success: function() { 
        console.log("Datum sent to datum.php"); 
      }, 
    }); 
  }, 500);
});

这样修改后，后端$_POST['datum']就能正确接收到前端传递的日期值，switch分支会匹配到'datum'并设置ingevoerde_datum Cookie，再访问datum.php时就能正常显示Date is: 12 maart 2020这类内容了。

内容的提问来源于stack exchange，提问作者LTCode