使用AJAX向本地PHP服务器传值后页面显示NULL，请求协助排查

问题原因 #

• 直接在浏览器打开index.php时，URL未携带value=hello参数，PHP的$_GET['value']无法获取到值，因此页面上的var_dump输出NULL。
• AJAX请求确实发送了带参数的请求，所以开发者工具Network面板的Response里能看到正确的var_dump结果，但该结果仅会被AJAX的success回调接收并打印到控制台，不会自动更新页面上的现有内容。

解决办法 #

根据需求，可选择以下两种处理方式：

方式1：直接访问带参数的URL #

若希望直接在浏览器页面看到正确的var_dump输出，直接访问 index.php?value=hello 即可，此时PHP代码能正常获取到$_GET['value']的值。

方式2：通过AJAX更新页面内容 #

若想在AJAX请求完成后，将返回结果展示在页面上，需修改JavaScript的success回调函数，把返回内容插入到页面指定位置：

修改后的JavaScript代码：

$.ajax({
    type: 'GET',
    url: 'index.php?value=hello',
    success: success => {
        console.log(success);
        // 将返回内容插入到页面中，比如新增一个容器展示
        $('body').append('<div class="ajax-result">' + success + '</div>');
        // 也可以替换指定元素的内容，比如替换段落内容
        // $('#para').html(success);
    },
    error: error => {
        console.error(error);
    }
});

另外，若仅需要PHP返回处理结果，无需返回整个HTML页面，可修改PHP代码，只输出所需内容，避免返回多余HTML：

修改后的index.php代码：

<?php
var_dump($_SERVER['REQUEST_METHOD']);
var_dump($_GET['value']);
// 终止脚本执行，不输出后续HTML内容
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>Document</title>
</head>
<body>
    <br>
    <hr>
    <button onclick="updateValue(this)" data-value="button1">Button 1</button>
    <button onclick="updateValue(this)" data-value="button2">Button 2</button>
    <button onclick="updateValue(this)" data-value="button3">Button 3</button>
    <br>
    <p id="para">This is a test paragraph</p>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>

这样AJAX请求仅会获取到PHP的var_dump结果，不会包含后续HTML，更适合在页面中展示。

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