JavaScript无法接收PHP脚本返回的JSON数据问题排查

核心问题分析 #

固定车站参数时能正常工作，但用下拉菜单传参后JS收不到JSON，大概率是表单默认提交行为没阻止，或者PHP响应头/参数传递有问题，结合你的描述，从以下几个点逐一排查：

1. 先阻止表单默认跳转（关键！） #

如果用$('form').submit()处理但没阻止默认提交，页面会直接刷新跳转，JS根本来不及接收异步返回的JSON。必须在提交事件里添加阻止逻辑：

$('form').submit(function(e) {
  // 阻止表单默认的刷新提交行为
  e.preventDefault();
  
  // 后续AJAX请求逻辑...
});

2. 检查表单action和method配置 #

• action：如果PHP逻辑和表单在同一个页面，直接留空或设为<?php echo $_SERVER['PHP_SELF']; ?>，确保请求发送到正确的处理脚本
• method：统一用POST（避免URL参数暴露），PHP端对应用$_POST['train_sta']获取参数；如果用GET，PHP就用$_GET['train_sta']

示例表单代码：

<form method="POST" action="">
  <select name="train_sta">
    <option value="BHM">伯明翰新街站</option>
    <option value="LDN">伦敦站</option>
    <!-- 其他车站选项 -->
  </select>
  <button type="submit">查询班次</button>
</form>

3. PHP端必须设置JSON响应头 #

即使PHP输出了JSON字符串，如果没设置Content-Type: application/json，浏览器会把它当成普通文本，JS无法自动解析为JSON对象：

// 先验证参数是否存在
if (isset($_POST['train_sta'])) {
  $train_sta = trim($_POST['train_sta']);
  // 验证Darwin要求的三位大写字母车站代码格式
  if (!preg_match('/^[A-Z]{3}$/', $train_sta)) {
    echo json_encode(['error' => '无效的车站代码']);
    exit;
  }

  // 调用Darwin接口获取数据
  $response = $OpenLDBWS->GetDepBoardWithDetails(15, $train_sta);
  
  // 设置正确的JSON响应头
  header('Content-Type: application/json');
  // 输出JSON并终止脚本，避免多余内容干扰
  echo json_encode($response);
  exit;
}

4. 用AJAX正确接收JSON #

确保AJAX请求指定dataType: 'json'，让jQuery自动解析返回内容：

$('form').submit(function(e) {
  e.preventDefault();
  
  // 序列化表单数据，自动获取下拉菜单的参数
  var formData = $(this).serialize();
  
  $.ajax({
    url: '', // 对应表单action属性
    method: 'POST',
    data: formData,
    dataType: 'json',
    success: function(data) {
      // 这里拿到解析后的JSON对象，直接用于渲染出发板
      console.log(data);
      renderDepartureBoard(data);
    },
    error: function(xhr, status, err) {
      // 调试用：打印错误信息和PHP返回的原始内容
      console.log('请求错误:', err);
      console.log('PHP返回内容:', xhr.responseText);
    }
  });
});

// 示例渲染函数，根据实际数据结构调整
function renderDepartureBoard(data) {
  var boardHtml = '<h4>实时出发班次</h4>';
  if (data.trainServices) {
    data.trainServices.forEach(function(service) {
      boardHtml += `<div class="service-item">
        <span class="time">${service.std}</span>
        <span class="dest">开往 ${service.destination.name}</span>
      </div>`;
    });
  }
  $('#departure-board').html(boardHtml);
}

5. 调试排查技巧 #

1. 打开浏览器F12开发者工具，切换到Network标签，提交表单后查看请求：
   • 确认请求状态码为200
   • 查看Response标签，确认PHP返回的是合法JSON（无多余HTML、空格）
2. 切换到Console标签，检查是否有JS语法错误或AJAX请求报错
3. PHP里用var_dump($train_sta)确认参数是否正确获取，再临时输出json_encode(['test' => $train_sta])测试参数传递是否正常

内容的提问来源于stack exchange，提问作者Daniel Alcántara de la Cruz