AJAX表单提交中的重定向与错误处理：PHP与JavaScript协同指南

<?php
// 确保在此阶段没有任何输出，以免影响header发送
ob_start(); 

$errors = []; // 用于收集所有验证或业务逻辑错误

// 示例：密码不匹配的错误捕获
if (isset($_POST['password']) && isset($_POST['cpassword']) && $_POST['cpassword'] !== $_POST['password']) {
    $errors[] = "两次输入的密码不匹配！";
}

// ... 其他表单验证和业务逻辑 ...

// 假设用户注册成功，如果没有任何错误
$registration_successful = empty($errors); 

// 根据HTTP_ACCEPT头判断是否为AJAX请求（期望JSON响应）
$is_ajax_request = (isset($_SERVER['HTTP_ACCEPT']) && strpos($_SERVER['HTTP_ACCEPT'], 'application/json') !== false);

if ($is_ajax_request) {
    // 处理AJAX请求
    if (!$registration_successful) {
        // AJAX请求失败：返回400 Bad Request状态码和JSON格式的错误信息
        header("Content-type: application/problem+json"); // 建议使用 application/problem+json 规范
        http_response_code(400); // 400 Bad Request
        exit(json_encode([
            "message" => "表单数据无效或处理失败",
            "errors" => $errors
        ]));
    } else {
        // AJAX请求成功：返回200 OK状态码和包含重定向URL的JSON
        header("Content-type: application/json");
        http_response_code(200); // 200 OK
        exit(json_encode(["location" => "home.php"])); // 告知客户端重定向到 home.php
    }
} else {
    // 处理传统表单提交
    if (!$registration_successful) {
        // 传统请求失败：在当前页面显示错误
        // ... 可以将错误信息存入session或直接在HTML中渲染 ...
        // 示例：直接渲染错误信息
        foreach ($errors as $error) : ?>
            <div class="error"><?= htmlspecialchars($error) ?></div>
        <?php endforeach;
        // 继续显示注册表单或返回到注册页面
    } else {
        // 传统请求成功：执行服务器端重定向
        header('Location: home.php');
        exit;
    }
}
ob_end_flush(); // 结束缓冲并输出
?>

document.querySelector(".register form").addEventListener("submit", async (e) => {
  e.preventDefault(); // 阻止表单默认提交行为

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

  try {
    // 使用fetch API发送POST请求
    const response = await fetch(form.action, {
      method: "POST",
      headers: {
        "Accept": "application/json", // 告知服务器我们期望JSON响应
      },
      body: formData // 将表单数据作为请求体
    });

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

    if (response.ok) { // response.ok 为 true 表示HTTP状态码在200-299之间
      // 请求成功，执行页面重定向
      if (data.location) {
        window.location.href = data.location;
      }
    } else if (response.status === 400) { // HTTP状态码为400，表示表单验证失败
      // 请求失败，显示错误信息
      const msgDiv = document.querySelector('.msg');
      if (msgDiv) {
        msgDiv.textContent = data.message || "发生未知错误。";
        // 如果服务器返回了详细错误列表，也可以在这里遍历显示
        // if (data.errors && Array.isArray(data.errors)) {
        //   data.errors.forEach(error => {
        //     const errorElement = document.createElement('p');
        //     errorElement.textContent = error;
        //     msgDiv.appendChild(errorElement);
        //   });
        // }
      }
    } else {
      // 处理其他非2xx和非400的HTTP错误
      const msgDiv = document.querySelector('.msg');
      if (msgDiv) {
        msgDiv.textContent = data.message || `服务器返回了错误：${response.status}`;
      }
    }
  } catch (error) {
    // 处理网络错误或JSON解析错误
    const msgDiv = document.querySelector('.msg');
    if (msgDiv) {
      msgDiv.textContent = "网络请求失败或服务器响应异常。";
    }
    console.error("Fetch error:", error);
  }
});