PHP动态网页AJAX交互开发_PHP动态网页AJAX异步交互完整指南

XMLHttpRequest

Fetch API

Fetch

// index.html 或你的主JS文件
document.addEventListener('DOMContentLoaded', () => {
    const loadUsersBtn = document.getElementById('loadUsers');
    const userListDiv = document.getElementById('userList');

    if (loadUsersBtn) {
        loadUsersBtn.addEventListener('click', async () => {
            userListDiv.innerHTML = '正在加载用户...'; // 简单的加载提示

            try {
                // 使用Fetch API发起GET请求
                const response = await fetch('api/get_users.php', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json' // 告诉服务器我期望JSON数据
                    }
                });

                // 检查HTTP响应状态码
                if (!response.ok) {
                    // 如果不是2xx系列的状态码，抛出错误
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const users = await response.json(); // 解析JSON响应

                // 清空并更新用户列表
                userListDiv.innerHTML = '';
                if (users && users.length > 0) {
                    const ul = document.createElement('ul');
                    users.forEach(user => {
                        const li = document.createElement('li');
                        li.textContent = `ID: ${user.id}, 姓名: ${user.name}, 邮箱: ${user.email}`;
                        ul.appendChild(li);
                    });
                    userListDiv.appendChild(ul);
                } else {
                    userListDiv.textContent = '没有找到用户。';
                }

            } catch (error) {
                console.error('获取用户数据失败:', error);
                userListDiv.innerHTML = `<p style="color: red;">加载失败: ${error.message}</p>`;
            }
        });
    }
});

<!-- index.html -->
<button id="loadUsers">加载用户</button>
<div id="userList"></div>

api/get_users.php

<?php
// 设置响应头，告诉客户端返回的是JSON数据
header('Content-Type: application/json');
// 允许跨域请求，如果你的前端和后端不在同一个域名下，这很重要。
// 实际生产环境中，你可能需要更精细的控制，比如只允许特定域名。
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

// 模拟从数据库获取用户数据
// 实际应用中，这里会连接数据库，执行SQL查询
$users = [
    ['id' => 1, 'name' => '张三', 'email' => 'zhangsan@example.com'],
    ['id' => 2, 'name' => '李四', 'email' => 'lisi@example.com'],
    ['id' => 3, 'name' => '王五', 'email' => 'wangwu@example.com'],
];

// 模拟可能出现的错误情况，比如数据库连接失败
// if (rand(0, 10) < 3) { // 20%的几率模拟失败
//     http_response_code(500); // 设置HTTP状态码为500 Internal Server Error
//     echo json_encode(['error' => '数据库连接失败，请稍后再试。']);
//     exit;
// }

// 将PHP数组编码成JSON字符串并输出
echo json_encode($users);

// 确保在输出JSON后不再有其他内容输出，否则可能导致JSON解析失败
exit;
?>

// register.html 或你的主JS文件
document.addEventListener('DOMContentLoaded', () => {
    const registerForm = document.getElementById('registerForm');
    const usernameInput = document.getElementById('username');
    const messageDiv = document.getElementById('formMessage');

    if (registerForm) {
        // 实时验证用户名是否可用
        usernameInput.addEventListener('blur', async () => {
            const username = usernameInput.value.trim();
            if (username.length < 3) {
                messageDiv.textContent = '用户名至少3个字符。';
                messageDiv.style.color = 'orange';
                return;
            }

            messageDiv.textContent = '检查用户名可用性...';
            messageDiv.style.color = 'gray';

            try {
                const response = await fetch('api/check_username.php', {
                    method: 'POST', // 检查通常用POST，或者GET带查询参数
                    headers: {
                        'Content-Type': 'application/json' // 告诉服务器我发送的是JSON
                    },
                    body: JSON.stringify({ username: username }) // 将数据转换为JSON字符串
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();
                if (result.available) {
                    messageDiv.textContent = '用户名可用！';
                    messageDiv.style.color = 'green';
                } else {
                    messageDiv.textContent = '用户名已被占用。';
                    messageDiv.style.color = 'red';
                }
            } catch (error) {
                console.error('检查用户名失败:', error);
                messageDiv.textContent = `检查失败: ${error.message}`;
                messageDiv.style.color = 'red';
            }
        });

        // 表单提交
        registerForm.addEventListener('submit', async (event) => {
            event.preventDefault(); // 阻止表单默认提交行为

            messageDiv.textContent = '正在提交...';
            messageDiv.style.color = 'blue';

            // 收集表单数据
            const formData = new FormData(registerForm);
            // 如果后端期望JSON，你需要手动转换
            const data = Object.fromEntries(formData.entries()); // 将FormData转换为普通对象
            // 比如这里我们假设后端接收JSON
            // const data = {
            //     username: formData.get('username'),
            //     password: formData.get('password'),
            //     email: formData.get('email')
            // };

            try {
                const response = await fetch('api/register.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json' // 告诉服务器我发送的是JSON
                    },
                    body: JSON.stringify(data) // 将数据转换为JSON字符串
                    // 如果后端接收FormData，可以这样写：
                    // body: formData
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();
                if (result.success) {
                    messageDiv.textContent = '注册成功！欢迎您！';
                    messageDiv.style.color = 'green';
                    registerForm.reset(); // 清空表单
                    // 可以在这里重定向或更新其他UI
                } else {
                    messageDiv.textContent = `注册失败: ${result.message}`;
                    messageDiv.style.color = 'red';
                }
            } catch (error) {
                console.error('注册请求失败:', error);
                messageDiv.textContent = `注册失败: ${error.message}`;
                messageDiv.style.color = 'red';
            }
        });
    }
});

api/check_username.php

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // 生产环境请细化
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

$input = json_decode(file_get_contents('php://input'), true);
$username = $input['username'] ?? '';

// 模拟数据库查询，检查用户名是否已存在
$existing_users = ['lisi', 'wangwu']; // 假设这些用户名已存在

$is_available = !in_array($username, $existing_users);

echo json_encode(['available' => $is_available]);
exit;
?>

api/register.php

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // 生产环境请细化
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

$input = json_decode(file_get_contents('php://input'), true);

$username = $input['username'] ?? '';
$password = $input['password'] ?? '';
$email = $input['email'] ?? '';

// 简单的后端验证
if (empty($username) || empty($password) || empty($email)) {
    http_response_code(400); // Bad Request
    echo json_encode(['success' => false, 'message' => '所有字段都是必填的。']);
    exit;
}
if (strlen($username) < 3) {
    http_response_code(400);
    echo json_encode(['success' => false, 'message' => '用户名至少3个字符。']);
    exit;
}
// 更多验证，比如密码强度、邮箱格式等...

// 模拟数据库操作：保存用户
// 实际中会进行密码哈希、数据库插入等操作
$success = true; // 假设注册成功

if ($success) {
    echo json_encode(['success' => true, 'message' => '用户注册成功！']);
} else {
    http_response_code(500); // Internal Server Error
    echo json_encode(['success' => false, 'message' => '注册失败，请稍后再试。']);
}
exit;
?>