PHP处理AJAX注册表单 成功跳转/400错误展示实现咨询

1. 实现说明 #

• 前端表单提交后，PHP后端做参数校验、注册逻辑处理
• 注册成功返回200状态码，前端自动跳转到用户中心页
• 注册失败返回400状态码，前端直接展示后端返回的错误提示
• 代码均为基础语法，无额外依赖，可直接部署运行

2. 完整代码（单文件即可运行，保存为register.php） #

<?php
// 配置项
$host = 'localhost';
$db_user = '你的数据库用户名';
$db_pass = '你的数据库密码';
$db_name = '你的数据库名';
$redirect_url = '/user/dashboard.php'; // 注册成功跳转地址

// 处理POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 开启JSON响应格式
    header('Content-Type: application/json');
    
    // 连接数据库
    $conn = mysqli_connect($host, $db_user, $db_pass, $db_name);
    if (!$conn) {
        http_response_code(400);
        echo json_encode(['msg' => '数据库连接失败：' . mysqli_connect_error()]);
        exit;
    }

    // 接收参数并校验
    $username = trim($_POST['username'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $password = trim($_POST['password'] ?? '');
    $confirm_pwd = trim($_POST['confirm_pwd'] ?? '');

    if (empty($username) || strlen($username) < 3) {
        http_response_code(400);
        echo json_encode(['msg' => '用户名长度不能少于3位']);
        exit;
    }
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        http_response_code(400);
        echo json_encode(['msg' => '请填写有效的邮箱地址']);
        exit;
    }
    if (strlen($password) < 6) {
        http_response_code(400);
        echo json_encode(['msg' => '密码长度不能少于6位']);
        exit;
    }
    if ($password !== $confirm_pwd) {
        http_response_code(400);
        echo json_encode(['msg' => '两次输入的密码不一致']);
        exit;
    }

    // 检查用户名是否已存在
    $check_sql = "SELECT id FROM users WHERE username = ? LIMIT 1";
    $check_stmt = mysqli_prepare($conn, $check_sql);
    mysqli_stmt_bind_param($check_stmt, 's', $username);
    mysqli_stmt_execute($check_stmt);
    mysqli_stmt_store_result($check_stmt);
    if (mysqli_stmt_num_rows($check_stmt) > 0) {
        http_response_code(400);
        echo json_encode(['msg' => '该用户名已被注册']);
        exit;
    }
    mysqli_stmt_close($check_stmt);

    // 检查邮箱是否已存在
    $check_email_sql = "SELECT id FROM users WHERE email = ? LIMIT 1";
    $check_email_stmt = mysqli_prepare($conn, $check_email_sql);
    mysqli_stmt_bind_param($check_email_stmt, 's', $email);
    mysqli_stmt_execute($check_email_stmt);
    mysqli_stmt_store_result($check_email_stmt);
    if (mysqli_stmt_num_rows($check_email_stmt) > 0) {
        http_response_code(400);
        echo json_encode(['msg' => '该邮箱已被注册']);
        exit;
    }
    mysqli_stmt_close($check_email_stmt);

    // 密码加密
    $hash_pwd = password_hash($password, PASSWORD_DEFAULT);

    // 插入用户数据
    $insert_sql = "INSERT INTO users (username, email, password) VALUES (?, ?, ?)";
    $insert_stmt = mysqli_prepare($conn, $insert_sql);
    mysqli_stmt_bind_param($insert_stmt, 'sss', $username, $email, $hash_pwd);
    if (mysqli_stmt_execute($insert_stmt)) {
        http_response_code(200);
        echo json_encode(['msg' => '注册成功', 'redirect' => $redirect_url]);
        exit;
    } else {
        http_response_code(400);
        echo json_encode(['msg' => '注册失败：' . mysqli_error($conn)]);
        exit;
    }
    mysqli_stmt_close($insert_stmt);
    mysqli_close($conn);
}
?>

<!-- 前端注册表单 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .form-container {max-width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px;}
        .form-group {margin-bottom: 15px;}
        label {display: block; margin-bottom: 5px;}
        input {width: 100%; padding: 8px; box-sizing: border-box;}
        .btn {background: #007bff; color: #fff; border: none; padding: 10px 15px; cursor: pointer; border-radius: 4px;}
        .error-msg {color: #dc3545; margin-top: 10px; display: none;}
    </style>
</head>
<body>
    <div class="form-container">
        <h2>用户注册</h2>
        <form id="registerForm">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" name="username" required>
            </div>
            <div class="form-group">
                <label>邮箱</label>
                <input type="email" name="email" required>
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" name="password" required>
            </div>
            <div class="form-group">
                <label>确认密码</label>
                <input type="password" name="confirm_pwd" required>
            </div>
            <div class="error-msg" id="errorMsg"></div>
            <button type="submit" class="btn">注册</button>
        </form>
    </div>

    <script>
        const form = document.getElementById('registerForm');
        const errorMsg = document.getElementById('errorMsg');

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);

            fetch('register.php', {
                method: 'POST',
                body: formData
            }).then(res => {
                return res.json().then(data => ({status: res.status, data: data}));
            }).then(res => {
                if (res.status === 200) {
                    // 注册成功跳转
                    window.location.href = res.data.redirect;
                } else {
                    // 注册失败展示错误
                    errorMsg.textContent = res.data.msg;
                    errorMsg.style.display = 'block';
                }
            }).catch(err => {
                errorMsg.textContent = '请求异常，请稍后重试';
                errorMsg.style.display = 'block';
            })
        })
    </script>
</body>
</html>

3. 使用前准备 #

• 提前在你的数据库中创建users表，SQL语句如下：

CREATE TABLE `users` (
  `id` int UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `username` varchar(50) NOT NULL UNIQUE,
  `email` varchar(100) NOT NULL UNIQUE,
  `password` varchar(255) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

• 把代码开头的数据库配置项替换为你自己的数据库信息
• 把$redirect_url修改为你自己的注册成功跳转页面地址

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