如何在PHP中读取Ajax POST的JSON？现有代码返回空求解决

问题根源 #

1. 表单默认提交行为中断Ajax请求：点击提交按钮时，表单会触发默认的页面刷新，此时Ajax请求还未完成就被中断，导致PHP根本没接收到JSON数据。
2. 未处理Ajax响应：当前代码没有处理服务器返回结果，无法直观排查问题。

修复步骤 #

1. 阻止表单默认提交行为 #

修改HTML的form标签，将事件对象传入check函数：

<form onsubmit="check(event)">
    <div class="form-group">
        <label>Your string:</label>
        <div contenteditable class="form-control h-50" id="string"></div>
        <div class="form-group text-center m-3">
            <button class="btn btn-primary" type="submit">Check</button>
        </div>
</form>

修改JS的check函数，添加阻止默认行为的逻辑，并完善响应处理：

function check(event) {
    // 阻止表单默认提交（核心修复点）
    event.preventDefault();

    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "index.php", true);
    xhttp.setRequestHeader("Content-Type", "application/json");

    // 处理服务器响应，方便调试
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log("服务器返回内容：", this.responseText);
            // 可在此添加页面结果展示逻辑
        }
    };

    var data = {
        "string": "hello"
    };
    xhttp.send(JSON.stringify(data));
}

2. 增强PHP端调试（可选） #

在PHP代码中添加原始请求内容输出，确认数据接收情况：

$rawInput = file_get_contents("php://input");
// 可查看服务器日志确认原始数据
error_log("接收到的原始请求：" . $rawInput);

$data = json_decode($rawInput);

if (!empty($data)) {
    $string = $data->string;
    echo $string;
} else {
    echo "未接收到有效JSON数据，原始内容：" . $rawInput;
}

3. 后续优化：获取contenteditable的真实输入内容 #

测试完成后，可将固定字符串改为获取div的用户输入：

// 替换原data定义部分
var stringDiv = document.getElementById("string");
var data = {
    "string": stringDiv.textContent.trim() // 获取纯文本并去除首尾空格
};

验证方法 #

打开浏览器开发者工具（F12）：

• 切换到网络标签，确认POST请求是否成功发送，检查请求体中是否包含{"string":"hello"}
• 切换到控制台标签，查看服务器返回的内容是否符合预期

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