<form id="myForm">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="message">留言:</label>
    <textarea id="message" name="message" required></textarea>
    
    <button type="submit">提交</button>
</form>

<div id="response"></div>

document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    
    // 获取表单数据
    const formData = new FormData(this);
    
    // 创建AJAX请求
    const xhr = new XMLHttpRequest();
    
    // 配置请求
    xhr.open('POST', 'process.php', true);
    
    // 设置请求头（如果需要发送JSON数据则使用）
    // xhr.setRequestHeader('Content-Type', 'application/json');
    
    // 处理响应
    xhr.onload = function() {
        if (xhr.status === 200) {
            // 请求成功
            document.getElementById('response').innerHTML = xhr.responseText;
        } else {
            // 请求失败
            document.getElementById('response').innerHTML = '请求失败: ' + xhr.statusText;
        }
    };
    
    // 发送请求
    xhr.send(formData);
    
    // 如果要发送JSON数据
    // const data = Object.fromEntries(formData);
    // xhr.send(JSON.stringify(data));
});

<?php
// 检查是否是POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取表单数据
    $name = $_POST['name'] ?? '';
    $email = $_POST['email'] ?? '';
    $message = $_POST['message'] ?? '';
    
    // 数据验证
    if (empty($name) || empty($email) || empty($message)) {
        echo '所有字段都是必填的';
        exit;
    }
    
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo '邮箱格式不正确';
        exit;
    }
    
    // 处理数据（例如保存到数据库）
    // ...
    
    // 返回响应
    echo "感谢您的提交，{$name}！我们已收到您的留言。";
} else {
    // 如果不是POST请求
    echo '无效的请求方法';
}
?>

document.getElementById('myForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    try {
        const formData = new FormData(this);
        const response = await fetch('process.php', {
            method: 'POST',
            body: formData
        });
        
        if (!response.ok) {
            throw new Error('网络响应不正常');
        }
        
        const result = await response.text();
        document.getElementById('response').innerHTML = result;
    } catch (error) {
        document.getElementById('response').innerHTML = '错误: ' + error.message;
    }
});