使用Ajax向同个index.php发送POST请求无响应问题排查

用户提供的index.php代码如下：

<?php
    $content = file_get_contents("php://input");
    $object = json_decode($content);

    echo var_dump($object);

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button onclick="hello()"> noice </button>    

    <script>
        function hello() {
            const data = {hello: "world"};

            const xhr = new XMLHttpRequest();
            xhr.open("POST", "index.php");
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(data));
        }

    </script>
</body>
</html>

问题分析 #

1. PHP逻辑干扰页面渲染：每次请求（包括初始页面加载）都会执行echo var_dump($object)，初始加载时php://input为空，会输出NULL，破坏HTML文档结构，导致页面渲染异常。
2. Ajax未处理响应：发送请求后没有监听响应事件，即使PHP返回数据，也无法在页面上显示，所以看起来"无反应"。

解决方案 #

修改代码，让PHP仅在POST请求时返回JSON格式的处理结果，同时给Ajax添加响应处理逻辑，将返回的数据显示在页面上：

<?php
// 仅处理POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $content = file_get_contents("php://input");
    $object = json_decode($content);
    
    // 返回JSON格式数据，避免输出HTML
    header('Content-Type: application/json');
    echo json_encode([
        'received_data' => $object,
        'raw_input' => $content
    ]);
    exit; // 终止脚本，避免输出后续HTML
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax POST Test</title>
    <style>
        .result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <button onclick="hello()">发送请求</button>
    <div class="result" id="result"></div>

    <script>
        function hello() {
            const data = {hello: "world"};
            const xhr = new XMLHttpRequest();
            
            xhr.open("POST", "index.php");
            xhr.setRequestHeader("Content-Type", "application/json");
            
            // 监听响应完成事件
            xhr.onload = function() {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    // 将结果显示在页面上
                    document.getElementById('result').innerHTML = `
                        <h3>接收的原始数据:</h3>
                        <pre>${response.raw_input}</pre>
                        <h3>解析后的对象:</h3>
                        <pre>${JSON.stringify(response.received_data, null, 2)}</pre>
                    `;
                } else {
                    document.getElementById('result').innerHTML = `请求失败，状态码: ${xhr.status}`;
                }
            };
            
            // 监听请求错误
            xhr.onerror = function() {
                document.getElementById('result').innerHTML = "请求发生错误";
            };
            
            xhr.send(JSON.stringify(data));
        }
    </script>
</body>
</html>

关键修改点 #

• PHP部分：通过$_SERVER['REQUEST_METHOD']判断是否为POST请求，处理完成后用exit终止脚本，避免输出后续HTML；返回JSON格式数据，方便JS解析。
• JS部分：添加onload和onerror事件监听，处理响应结果并显示在页面的result容器中。

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