PHP与Ajax实战：无刷新表单提交 使用PHP+Ajax提升用户体验的完整教程

<form id="myForm" action="process.php" method="POST">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" required><br><br>

    <button type="submit">提交</button>
    <div id="responseMessage" style="margin-top: 10px; color: green;"></div>
</form>

fetch

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    const form = event.target;
    const formData = new FormData(form); // 收集表单数据

    fetch(form.action, {
        method: form.method,
        body: formData // 将表单数据作为请求体
    })
    .then(response => {
        // 检查HTTP响应状态，如果不是2xx，抛出错误
        if (!response.ok) {
            throw new Error('网络请求失败，状态码: ' + response.status);
        }
        return response.json(); // 解析JSON响应
    })
    .then(data => {
        const responseDiv = document.getElementById('responseMessage');
        if (data.success) {
            responseDiv.style.color = 'green';
            responseDiv.textContent = data.message;
            form.reset(); // 提交成功后清空表单
        } else {
            responseDiv.style.color = 'red';
            responseDiv.textContent = data.message;
        }
    })
    .catch(error => {
        console.error('提交过程中出现错误:', error);
        const responseDiv = document.getElementById('responseMessage');
        responseDiv.style.color = 'red';
        responseDiv.textContent = '提交失败，请稍后再试。';
    });
});

process.php

<?php
header('Content-Type: application/json'); // 告诉浏览器返回的是JSON

$response = ['success' => false, 'message' => ''];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = $_POST['name'] ?? '';
    $email = $_POST['email'] ?? '';

    // 简单的数据验证
    if (empty($name) || empty($email)) {
        $response['message'] = '姓名和邮箱都不能为空。';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $response['message'] = '邮箱格式不正确。';
    } else {
        // 这里可以加入你的业务逻辑，比如：
        // 1. 数据清洗和安全处理 (例如：htmlentities, strip_tags)
        // $name = htmlspecialchars(trim($name));
        // $email = htmlspecialchars(trim($email));

        // 2. 数据库操作 (使用PDO预处理语句防止SQL注入)
        // try {
        //     $pdo = new PDO("mysql:host=localhost;dbname=your_db", "user", "password");
        //     $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        //     $stmt = $pdo->prepare("INSERT INTO users (name, email) VALUES (:name, :email)");
        //     $stmt->execute([':name' => $name, ':email' => $email]);
        //     $response['success'] = true;
        //     $response['message'] = '数据提交成功！';
        // } catch (PDOException $e) {
        //     error_log("Database error: " . $e->getMessage()); // 记录错误到日志
        //     $response['message'] = '数据库操作失败，请联系管理员。';
        // }

        // 示例：直接模拟成功
        $response['success'] = true;
        $response['message'] = '数据提交成功，姓名：' . $name . '，邮箱：' . $email;
    }
} else {
    $response['message'] = '只接受POST请求。';
}

echo json_encode($response);
exit;
?>

success

message

fetch

XMLHttpRequest

fetch

FormData

FormData

// HTML
<input type="file" id="myFile" name="myFile">

// JavaScript (在上面的基础上修改)
const fileInput = document.getElementById('myFile');
formData.append('myFile', fileInput.files[0]); // 将文件添加到FormData
// 后端PHP则通过 $_FILES 来接收文件

$_FILES

XMLHttpRequest

upload.onprogress

fetch

appendChild

innerHTML

textContent