PHP代码怎么实现AJAX异步请求_PHP响应AJAX请求与JSON返回

<button id="loadData">获取数据</button>
<div id="result"></div>

<script>
document.getElementById('loadData').addEventListener('click', function() {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'ajax_handler.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            document.getElementById('result').innerHTML = 
                '姓名：' + data.name + '<br>年龄：' + data.age;
        }
    };

    xhr.send('action=getUserInfo');
});
</script>

fetch('ajax_handler.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'action=getUserInfo'
})
.then(response => response.json())
.then(data => {
    document.getElementById('result').innerHTML = 
        '姓名：' + data.name + '<br>年龄：' + data.age;
});

<?php
// 设置响应头为JSON格式
header('Content-Type: application/json; charset=utf-8');

// 允许跨域（可选，根据实际需求）
header('Access-Control-Allow-Origin: *');

// 判断是否为POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    echo json_encode(['error' => '仅支持POST请求']);
    exit;
}

// 获取请求参数
$action = $_POST['action'] ?? '';

// 模拟不同操作
switch ($action) {
    case 'getUserInfo':
        $response = [
            'name' => '张三',
            'age'  => 25,
            'city' => '北京'
        ];
        break;

    case 'saveData':
        // 可处理表单保存等逻辑
        $response = ['status' => 'success', 'message' => '数据保存成功'];
        break;

    default:
        $response = ['error' => '无效的操作'];
}

// 输出JSON响应
echo json_encode($response, JSON_UNESCAPED_UNICODE);
?>

$response = [
    'success' => true,
    'data'    => $userData,
    'message' => '获取成功'
];
echo json_encode($response, JSON_UNESCAPED_UNICODE);