使用jQuery $.post指定json数据类型时返回空，该如何修复？

问题现象 #

调用$.post请求PHP接口时，传入'json'作为数据类型参数，控制台无任何返回输出；移除该参数后，可正常拿到字符串格式的数组内容。

通用排查步骤 #

• 校验返回内容合法性
  先移除'json'参数，打印出完整的返回字符串，检查内容是否符合单JSON结构规范：
  • 确认json_encode输出前后无额外内容（PHP报错、警告、空格、换行、其他echo输出都会破坏JSON结构）
  • 确认返回内容仅包含一段JSON字符串，无多段JSON拼接的情况
• 添加错误回调定位解析问题
  给AJAX请求添加fail回调，可直接拿到JSON解析错误原因和原始返回内容：

  cOffices()
    .done(data => console.log(data))
    .fail((xhr, status, error) => {
        console.log('解析错误信息：', error);
        console.log('接口原始返回内容：', xhr.responseText);
    });
  

• 优化PHP端响应配置
  输出JSON前添加响应头，避免jQuery解析异常，输出后终止后续代码执行，防止额外内容输出：

  if (isset($_REQUEST['getOffice'])) {
      $oficModel = new User();
      $getO = $oficModel->getOfficeData($config['dirLogin'], $config['dirPass']);
      header('Content-Type: application/json; charset=utf-8');
      echo json_encode($getO);
      exit;
  }
  

• 校验异步调用顺序
  如果你需要在getCreate请求完成后调用cOffices获取办公区数据渲染表单，需要保证cOffices异步请求返回后再拼接表单模板，避免lOffices变量未定义：

  $.post('../../init.php', {getCreate: ''}, 'json')
  .done(async (groupData) => {
      // 先生成分组下拉选项
      let lOptions = groupData.map(d => `<option value="${d.id_grupo}">${d.nom_grupo}</option>`).join('');
      // 等待办公区接口返回后再生成办公区下拉选项
      const officeData = await cOffices();
      let lOffices = officeData.map(d => `<option value="${d.id}">${d.office_name}</option>`).join('');
      // 最后拼接完整表单模板
      const formCreate = `<!-- 你的表单HTML代码 -->`;
      $('.container1').prepend(formCreate);
      $('.formCreate').fadeTo(400, 1);
  });
  

本问题最终解决方案 #

经排查，错误原因为PHP文件中存在两个同名的getOffice请求处理流程，发起请求时接口返回了两段拼接的JSON编码字符串，导致jQuery的JSON解析器无法正常解码，因此指定json类型时返回为空。修正PHP端重复的处理逻辑，仅输出一段合法JSON即可解决问题。

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