Symfony中从AJAX请求获取复选框状态返回null问题

问题根源 #

1. 键名不匹配：前端AJAX发送的JSON数据键是isHoraireAutoAll，但控制器中尝试获取的是myCheckbox，两者名称不一致。
2. 请求格式解析问题：Symfony的Request::get()方法默认处理application/x-www-form-urlencoded格式的表单数据，无法直接读取application/json格式的请求体内容。

解决方案 #

方案一：修改前端发送表单编码数据（贴近传统表单提交逻辑） #

将AJAX请求的内容类型改为表单编码，发送与控制器预期键名匹配的数据：

<label for="myCheckbox">My Checkbox</label>
<input type="checkbox" id="myCheckbox" name="myCheckbox">

<script>
const checkboxAutoAll = document.querySelector("#myCheckbox");
const url = '/'

checkboxAutoAll.addEventListener("click", function () {
  const checkboxState = checkboxAutoAll.checked;

  const requete = new XMLHttpRequest();
  requete.open("POST", url, true);
  // 设置为表单编码类型
  requete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  requete.onload = function () {
    if (requete.status >= 200 && requete.status < 300) {
      console.log("Request successful, response:", requete.responseText);
    } else {
      console.error("Server responded with an error:", requete.status, requete.statusText);
    }
  };

  requete.onerror = function () {
    console.error("Request failed due to a network error");
  };

  // 发送与控制器匹配的键名数据
  const data = `myCheckbox=${checkboxState}`;
  requete.send(data);
  console.log("Sending AJAX request to:", url, "with data:", data);
});
</script>

此时原控制器代码无需修改，$request->get('myCheckbox')即可正常获取复选框状态。

方案二：保持JSON格式，修改控制器解析请求体 #

如果需要继续使用JSON格式发送数据，需在控制器中手动解析请求体：

#[Route('/', name: 'app_main', methods: ['GET', 'POST'])]
public function index(Request $request): Response
{
    // 解析JSON请求体为数组
    $jsonData = json_decode($request->getContent(), true);
    // 读取前端发送的键名对应的值（注意键名要与前端一致）
    $data = $jsonData['isHoraireAutoAll'] ?? null;
    dump($data);

    // 必须返回响应，避免Symfony报错
    return new Response('Request processed');
}

前端代码保持原有JSON发送逻辑即可，无需修改。

额外提示 #

• 若使用Symfony 5.1+，可直接用$request->toArray()简化JSON解析：

  $data = $request->toArray()['isHoraireAutoAll'] ?? null;
  

• 始终确保前端发送的键名与控制器中取值的键名完全一致，这是最容易忽略的细节。

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