使用FETCH API向PHP传递数据时JSON解析失败问题求助

问题根源分析 #

JS端问题 #

• 重复JSON序列化：你手动拼接出JSON格式的字符串js1，又对它做了一次JSON.stringify得到js2，导致最终传递的是双重转义的无效JSON，PHP自然解析失败。
• 请求Body格式错误：已经设置Content-Type: application/json，但body传的是普通对象，浏览器会自动把它转成form-data格式，和声明的Content-Type不匹配。

PHP端问题 #

• 错误的数组取值逻辑：你试图用$kate[0]获取数据，但正确解析后的JSON是关联数组，应该用键名（比如$kate['genre']）取值，直接取索引0会触发PHP警告，输出带<br />的HTML错误信息——这就是JS控制台报错“Unexpected token '<'”的直接原因，因为PHP返回的不是纯JSON。
• 无效的条件判断：isset($_POST)永远为true，因为$_POST是超全局变量，这个判断完全没用。

修正后的代码 #

JS代码 #

const category = document.getElementById('genreSelect').value;
// 直接构造对象，避免手动拼接JSON的语法错误
const postData = { genre: category };

fetch("button.php", {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(postData) // 直接传递序列化后的JSON字符串
})
.then(response => {
    // 先校验响应状态，防止解析错误页面
    if (!response.ok) {
        throw new Error('请求失败');
    }
    return response.json();
})
.then(data => {
    console.log('返回数据:', data);
})
.catch(error => {
    console.error('错误:', error);
});

PHP代码 #

<?php
header('Content-Type: application/json');

// 读取原始请求体
$data = file_get_contents('php://input');
// 解析JSON并转为关联数组
$kate = json_decode($data, true);

// 检查JSON解析是否成功
if ($kate === null) {
    echo json_encode(['error' => '无效的JSON数据']);
    exit;
}

// 安全获取genre值，避免未定义索引警告
$kat = $kate['genre'] ?? '';

$every = array();
echo json_encode($every);
?>

额外注意事项 #

1. 永远不要手动拼接JSON字符串，直接构造JS对象再用JSON.stringify处理，能避免引号转义、语法错误等问题。
2. PHP端必须检查json_decode的返回值，一旦解析失败要返回明确的错误JSON，不要让PHP输出默认的HTML警告。
3. JS端解析JSON前先校验响应状态，避免服务器返回错误页面时强行解析非JSON内容。

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