如何实现PHP注册成功JSON跳转home.php、400错误返回提示功能

完整register.php代码 #

<?php
// 注意：文件开头不要有任何输出（包括空格、UTF-8 BOM头），否则header设置会失效
$errors = [];
// 仅处理POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 1. 基础参数校验
    if (empty($_POST['username'])) $errors[] = '用户名不能为空';
    if (empty($_POST['email'])) $errors[] = '邮箱不能为空';
    if (empty($_POST['password'])) $errors[] = '密码不能为空';
    if (empty($_POST['cpassword'])) $errors[] = '确认密码不能为空';
    // 2. 格式校验
    if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) $errors[] = '邮箱格式不合法';
    if (strlen($_POST['password']) < 6) $errors[] = '密码长度不能少于6位';
    if ($_POST['password'] !== $_POST['cpassword']) $errors[] = '两次输入的密码不一致';
    // 3. 数据库操作（请修改下方配置为你自己的数据库信息）
    if (empty($errors)) {
        $dbHost = '127.0.0.1';
        $dbUser = '你的数据库用户名';
        $dbPass = '你的数据库密码';
        $dbName = '你的数据库名';
        $conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);
        if ($conn->connect_error) {
            $errors[] = '数据库连接失败：' . $conn->connect_error;
        } else {
            // 校验用户名是否已存在
            $stmt = $conn->prepare("SELECT id FROM users WHERE username = ?");
            $stmt->bind_param("s", $_POST['username']);
            $stmt->execute();
            $stmt->store_result();
            if ($stmt->num_rows > 0) {
                $errors[] = '该用户名已被注册';
            }
            $stmt->close();
            // 校验邮箱是否已存在
            if (empty($errors)) {
                $stmt = $conn->prepare("SELECT id FROM users WHERE email = ?");
                $stmt->bind_param("s", $_POST['email']);
                $stmt->execute();
                $stmt->store_result();
                if ($stmt->num_rows > 0) {
                    $errors[] = '该邮箱已被注册';
                }
                $stmt->close();
            }
            // 写入用户数据
            if (empty($errors)) {
                // 密码哈希存储，禁止存明文
                $hashedPwd = password_hash($_POST['password'], PASSWORD_DEFAULT);
                $stmt = $conn->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
                $stmt->bind_param("sss", $_POST['username'], $_POST['email'], $hashedPwd);
                if (!$stmt->execute()) {
                    $errors[] = '注册失败：' . $stmt->error;
                }
                $stmt->close();
            }
            $conn->close();
        }
    }
    // 4. 处理响应
    if (strpos($_SERVER['HTTP_ACCEPT'], 'application/json') !== false) {
        // AJAX请求返回JSON
        if (!empty($errors)) {
            header("Content-type: application/problem+json");
            http_response_code(400);
            exit(json_encode([
                "message" => "表单校验失败",
                "errors" => $errors
            ]));
        }
        header("Content-type: application/json");
        exit(json_encode(["location" => "home.php"]));
    } else {
        // 普通表单提交场景的 fallback
        if (!empty($errors)) {
            // 把错误存到SESSION里跳转回表单页展示
            session_start();
            $_SESSION['errors'] = $errors;
            header("Location: " . $_SERVER['HTTP_REFERER']);
            exit;
        }
        header("Location: home.php");
        exit;
    }
}
// 这里可以放注册表单的HTML代码（如果这个文件同时用来展示表单的话）
session_start();
if (!empty($_SESSION['errors'])) {
    foreach ($_SESSION['errors'] as $error) {
        echo '<div class="error">' . htmlspecialchars($error) . '</div>';
    }
    unset($_SESSION['errors']);
}
?>
<!-- 下方是注册表单HTML示例，可根据自己的需求修改样式 -->
<div class="register">
    <div class="msg" style="color: red;"></div>
    <form action="register.php" method="post">
        <div>
            <label>用户名：</label>
            <input type="text" name="username" required>
        </div>
        <div>
            <label>邮箱：</label>
            <input type="email" name="email" required>
        </div>
        <div>
            <label>密码：</label>
            <input type="password" name="password" required>
        </div>
        <div>
            <label>确认密码：</label>
            <input type="password" name="cpassword" required>
        </div>
        <button type="submit">注册</button>
    </form>
</div>
<script>
document.querySelector(".register form").addEventListener("submit", async (e) => {
  e.preventDefault()
  const form = e.target
  const body = new FormData(form)
  const msgDom = document.querySelector('.msg')
  msgDom.textContent = ''
  try {
    const res = await fetch(form.action, {
      method: "POST",
      headers: {
        accept: "application/json",
      },
      body
    })
    const data = await res.json()
    if (res.ok) {
      location.href = data.location
    } else if (res.status === 400) {
      // 展示第一个错误，也可以遍历errors数组展示所有错误
      msgDom.textContent = data.errors[0] || data.message
    }
  } catch (err) {
    msgDom.textContent = '网络错误，请稍后重试'
  }
})
</script>

注意事项 #

• 请先在你的数据库中创建users表，至少包含id（主键自增）、username（varchar类型）、email（varchar类型）、password（varchar至少255位）字段
• 代码中数据库连接配置请替换为你自己的实际配置
• 如果只需要支持AJAX提交不需要兼容普通表单提交，可以删除普通表单响应的 fallback 逻辑

内容的提问来源于stack exchange，提问作者contributor01010