使用Fetch向PHP文件传递数据返回null值的问题求助

核心问题拆解 #

1. PHP返回null的本质：你把JS脚本和PHP请求处理逻辑混在同一个Test.php里，导致执行顺序混乱。当浏览器第一次请求Test.php时，PHP先执行，此时php://input是空的（因为是GET请求），所以输出null；之后客户端执行JS发送POST请求到Test.php，这时候PHP才会接收到数据，但你看到的页面是第一次请求的结果，控制台打印的才是第二次请求的响应。
2. 请求仅刷新触发：浏览器缓存了第一次请求的页面内容，加上脚本执行时机没有明确绑定，导致首次打开页面时JS未触发请求。

修复步骤 #

1. 拆分文件结构，明确职责 #

把前端页面、请求处理脚本、JS逻辑彻底分开，避免执行顺序冲突：

① 前端页面：index.html

负责加载JS并确保页面加载时触发请求：

<!DOCTYPE html>
<html>
<head>
    <title>Fetch API Test</title>
</head>
<body>
    <script src="datosJS.js"></script>
</body>
</html>

② 请求处理PHP：api.php

专门处理Fetch的POST请求，不混入前端代码：

<?php
// 仅允许POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    echo json_encode(['error' => '仅支持POST请求']);
    exit;
}

// 接收并解析JSON数据
$rawInput = file_get_contents("php://input");
$body = json_decode($rawInput, true);

// 检查JSON解析是否成功
if (json_last_error() !== JSON_ERROR_NONE) {
    http_response_code(400);
    echo json_encode(['error' => 'JSON格式错误']);
    exit;
}

// 输出接收的数据
var_dump($body);
?>

③ 前端JS：datosJS.js

修改请求目标为api.php，绑定DOM加载事件确保脚本执行时机：

// 页面DOM加载完成后执行请求
document.addEventListener('DOMContentLoaded', function() {
    const requestOptions = {
        method: "POST",
        headers: {
            "Content-Type": "application/json" // 规范大小写，避免服务器解析问题
        },
        body: JSON.stringify({ 
            username:"Jonathan",
            email:"jonathan@gmail.com",
            password:"123456"
        })
    };

    fetch('api.php', requestOptions)
        .then(resp => resp.text())
        .then(resp => {
            console.log('服务器响应:', resp);
        })
        .catch(err => {
            console.error('请求失败:', err);
        });
});

2. 关键注意事项 #

• Content-Type规范：请求头的Content-Type要写成大写开头的Content-Type，部分服务器对大小写敏感，可能导致无法识别JSON格式。
• 本地服务器运行：不要直接打开本地HTML文件，用PHP内置服务器（项目目录下执行php -S localhost:8000）或XAMPP/WAMP运行，避免跨域和文件协议限制。
• JSON格式校验：用json_last_error()排查解析失败原因，确保发送的JSON字符串格式正确。

3. 测试流程 #

1. 启动本地PHP服务器，访问http://localhost:8000/index.html。
2. 打开浏览器控制台，能直接看到请求触发并返回正确的数据。
3. 查看网络面板，会看到api.php的POST请求，响应内容就是你发送的JSON数据的打印结果。

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