使用PHP和JavaScript实现无刷新表单提交与数据保留的教程

<form action="signup.php" id="form" method="POST">
    <a style="text-decoration:none;" href="index.php"><h1>Mero <span>Notes</span></h1></a>
    <h3>注册您的账户</h3>
    <?php
        // 检查是否存在错误消息，并安全地显示
        if (isset($message) && !empty($message)) {
            echo '<p style="margin-top:10px;color:red;">' . htmlspecialchars($message) . '</p>';
        }
    ?>
    <p id="validationSpan"></p>

    <!-- 使用PHP回填表单数据 -->
    <input placeholder="全名" type="text" required="required" name="fullName"
           value="<?= isset($_POST['fullName']) ? htmlspecialchars($_POST['fullName']) : '' ?>"/>
    <input placeholder="邮箱" type="text" required="required" name="email"
           value="<?= isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>"/>
    <!-- 密码字段通常不应回填，出于安全考虑 -->
    <input placeholder="密码" type="password" name="password" required="required" id="id_password" minlength="8" onkeyup="passValidation();"/>
    <input placeholder="确认密码" type="password" name="conPassword" required="required" id="id_conPassword" onkeyup="passValidation();"/>
    <input placeholder="联系方式" type="number" required="required" name="contactNum"
           value="<?= isset($_POST['contactNum']) ? htmlspecialchars($_POST['contactNum']) : '' ?>"/>
    <button type="submit" class="regButton" id="regBtn">注册</button>
    <h4 style="text-align: right; color:black;font-size:12px;">
        已有账户？
        <a class="buttomLogin" href="index.php">立即登录</a>
    </h4>
</form>

<?php
session_start(); // 启动会话，用于传递消息

// 假设 $conn 是数据库连接对象
// 例如：$conn = mysqli_connect("localhost", "user", "password", "database");

$message = ''; // 初始化错误消息变量

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取并清理表单数据
    $fullName = htmlspecialchars($_POST['fullName'] ?? '');
    $email = htmlspecialchars($_POST['email'] ?? '');
    $password = $_POST['password'] ?? ''; // 密码不进行htmlspecialchars，但在哈希前进行验证
    $confirmPassword = $_POST['conPassword'] ?? '';
    $phoneNumber = htmlspecialchars($_POST['contactNum'] ?? '');

    // 服务器端验证
    // 1. 检查邮箱是否已注册
    $stmt = $conn->prepare("SELECT email FROM signupdatabasemn WHERE email = ?");
    $stmt->bind_param("s", $email);
    $stmt->execute();
    $result = $stmt->get_result();

    if (mysqli_num_rows($result) > 0) {
        $message = '您输入的邮箱已被注册。';
    }
    // 2. 检查密码是否匹配
    elseif ($password !== $confirmPassword) {
        $message = '密码不匹配。';
    }
    // 3. 检查密码长度（或其他密码策略）
    elseif (strlen($password) < 8) {
        $message = '密码长度至少为8位。';
    }
    // 4. 其他字段验证...

    // 如果没有错误，则处理注册
    if (empty($message)) {
        $epassword = password_hash($password, PASSWORD_BCRYPT); // 哈希密码

        $sql_insert = "INSERT INTO signupdatabasemn (fullName, email, password, phoneNumber) VALUES (?, ?, ?, ?)";
        $stmt_insert = $conn->prepare($sql_insert);
        $stmt_insert->bind_param("sssi", $fullName, $email, $epassword, $phoneNumber);

        if ($stmt_insert->execute()) {
            // 注册成功，重定向到登录页面
            $_SESSION['success_message'] = '注册成功！请登录。';
            header('Location: /demosite3fnl/index.php');
            exit();
        } else {
            $message = '注册失败，请稍后再试。';
        }
    }
    // 如果有错误，则 $message 已经设置，页面将重新加载并显示错误和回填数据
}

// 在这里可以包含或渲染表单的HTML，确保 $message 变量可用
// 例如：include 'signup_form.html'; 或 require 'path/to/your/template.php';
// 如果 signup.php 就是包含表单的页面，则无需额外操作。
?>

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('form');
    const messageParagraph = form.querySelector('p[style*="color:red"]'); // 获取显示错误消息的P标签

    form.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为（即阻止页面刷新）

        // 清除之前的错误消息
        if (messageParagraph) {
            messageParagraph.textContent = '';
            messageParagraph.style.display = 'none'; // 隐藏错误消息
        }

        const formData = new FormData(form); // 收集表单所有数据

        // 发送AJAX请求
        fetch('signup.php', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); // 假设服务器返回JSON格式的响应
        })
        .then(data => {
            if (data.success) {
                // 注册成功
                alert(data.message); // 显示成功消息
                window.location.href = 'index.php'; // 重定向到登录页面
            } else {
                // 注册失败，显示服务器返回的错误消息
                if (messageParagraph) {
                    messageParagraph.textContent = data.message;
                    messageParagraph.style.display = 'block'; // 显示错误消息
                }
                // 注意：由于页面未刷新，表单数据自然保留
            }
        })
        .catch(error => {
            console.error('AJAX请求出错:', error);
            if (messageParagraph) {
                messageParagraph.textContent = '发生未知错误，请稍后再试。';
                messageParagraph.style.display = 'block';
            }
        });
    });
});

<?php
header('Content-Type: application/json'); // 告知客户端响应是JSON格式
session_start();

$response = ['success' => false, 'message' => '']; // 初始化响应数组

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 假设 $conn 是数据库连接对象

    // 获取并清理表单数据
    $fullName = htmlspecialchars($_POST['fullName'] ?? '');
    $email = htmlspecialchars($_POST['email'] ?? '');
    $password = $_POST['password'] ?? '';
    $confirmPassword = $_POST['conPassword'] ?? '';
    $phoneNumber = htmlspecialchars($_POST['contactNum'] ?? '');

    // 服务器端验证（与方法一类似）