PHP转JSON传JS购物车报错：返回HTML而非有效JSON

AI 小北

2026-6-28

问题解释与解决方案

问题根源

你遇到的错误核心是：PHP脚本没有输出纯JSON数据，响应里混进了HTML内容（比如<head>标签）。常见原因包括：

处理表单的PHP文件同时负责渲染整个页面的HTML结构，导致响应既包含页面代码又有JSON；
PHP脚本开头/结尾有多余的空格、换行，或者引入了带HTML输出的文件；
输出JSON前未设置正确的响应头，且存在其他无关输出。

解决方案

1. 拆分API与页面渲染

单独创建一个纯API用途的PHP文件（比如fetch-cart-data.php），只负责查询SQL、输出JSON，不包含任何HTML代码。不要在同一个文件里既处理表单提交又渲染购物车页面。

2. 确保PHP仅输出JSON

检查所有引入的文件（include/require），确保它们没有输出HTML、空格或换行；
若需要使用session，在脚本开头调用session_start()，且必须在任何输出之前执行；
设置正确的响应头，输出JSON后立即终止脚本：

<?php
session_start();
// 必须在任何输出前设置响应头，告诉浏览器返回的是JSON
header('Content-Type: application/json');

// SQL查询逻辑示例
$db = mysqli_connect('你的数据库地址', '用户名', '密码', '数据库名');
$query = "SELECT id, name, price, quantity FROM cart WHERE session_id = '" . session_id() . "'";
$result = mysqli_query($db, $query);
$cart_data = mysqli_fetch_all($result, MYSQLI_ASSOC);

// 输出JSON，处理中文可添加JSON_UNESCAPED_UNICODE参数
echo json_encode($cart_data, JSON_UNESCAPED_UNICODE);
// 终止脚本，避免后续意外输出内容
exit;
?>

3. 调整JS的Fetch请求

确保请求指向纯API文件，而非渲染页面的PHP文件，并添加基础错误处理：

// 表单提交逻辑示例
document.querySelector('#cart-form').addEventListener('submit', function(e) {
  e.preventDefault();
  fetch('fetch-cart-data.php', {
    method: 'POST',
    body: new FormData(this)
  })
  .then(res => {
    // 先验证响应状态是否正常
    if (!res.ok) throw new Error('请求失败');
    return res.json();
  })
  .then(cartItems => {
    // 处理购物车数据，比如渲染到侧边栏
    console.log(cartItems);
  })
  .catch(err => {
    console.error('错误:', err);
  });
});

4. 排查常见坑点

若出现headers already sent错误：检查脚本开头/结尾是否有多余空格，或是否在header()之前用echo、var_dump输出了内容；
数据库查询结果为空时，json_encode会输出[]或null，这是合法JSON，不会导致解析错误；
不要在API文件里写HTML注释、调试用的echo信息，这些都会污染JSON输出。

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