使用fetch与XHR同步POST传JS变量至PHP时，$_POST为空的问题

你的代码里存在多个关键错误，导致POST数据无法被PHP接收，以下是问题分析和修正方案：

核心问题梳理 #

• 表单值获取错误：直接取表单元素的value属性，表单本身无此属性，应获取输入框的实际内容
• XHR请求方式被覆盖：先后调用xhr.open("POST")和xhr.open("GET")，最终请求变为GET，POST数据无法传递
• FormData的Content-Type设置错误：手动设置application/x-www-form-urlencoded会破坏FormData的自动编码规则，导致PHP无法解析
• FormData初始化时机错误：页面加载时就创建FormData，此时输入框为空，点击按钮时发送的不是最新输入值
• Fetch发送JSON但PHP未适配：用JSON.stringify发送数据时，PHP不会自动将JSON解析到$_POST，需手动从php://input读取
• 并行发送多个AJAX请求：同时调用Fetch和XHR，逻辑混乱，应只保留一种方法

修正后的代码 #

HTML（新增结果展示容器）

<html>
<div>
<section>
<form id="testForm" action="file.php" method="post">
<input type="text" id="testInput" name="testInput">
<input type="button" id="testBtn" name="testBtn" value="Test Button">
</form>
<!-- 用于无刷新展示处理结果 -->
<div id="result"></div>
</section>
</div>
</html> 

PHP（兼容FormData和JSON两种传递方式）

<?php
// 处理JSON格式的POST数据
if ($_SERVER['CONTENT_TYPE'] === 'application/json') {
    $postData = json_decode(file_get_contents('php://input'), true);
    echo "JSON接收数据：";
    print_r($postData);
} 
// 处理FormData格式的POST数据
else {
    echo "FormData接收数据：";
    print_r($_POST);
}
?>

JS（推荐使用Fetch，逻辑更简洁）

const testButton = document.getElementById("testBtn");
const testForm = document.getElementById("testForm");
const resultContainer = document.getElementById("result");

testButton.onclick = function() {
    testButton.style.color = "red";

    // 点击时才创建FormData，获取最新表单值
    const formData = new FormData(testForm);
    fetch("/file.php", {
        method: "POST",
        body: formData
    })
    .then(res => res.text())
    .then(txt => {
        // 无刷新展示PHP返回的结果
        resultContainer.textContent = txt;
        testButton.style.color = "purple";
    })
    .catch(e => console.error(e));
};

可选：修正后的XHR版本JS

const testButton = document.getElementById("testBtn");
const testForm = document.getElementById("testForm");
const resultContainer = document.getElementById("result");

testButton.onclick = function() {
    testButton.style.color = "red";
    const xhr = new XMLHttpRequest();
    const formData = new FormData(testForm);

    xhr.open("POST", "/file.php", true);
    // 不要手动设置Content-Type，FormData会自动处理编码
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                resultContainer.textContent = xhr.responseText;
                testButton.style.color = "purple";
            } else {
                console.error("请求错误：", xhr.status);
            }
        }
    };
    xhr.send(formData);
};

关键注意事项 #

1. 确保PHP文件路径正确（/file.php是网站根路径，若文件在子目录需调整为相对路径）
2. 不要同时发送多个AJAX请求，避免逻辑冲突
3. 使用FormData时无需手动设置Content-Type，让浏览器自动处理编码
4. 若选择发送JSON格式数据，必须在PHP中通过php://input读取并解析

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