避免表单提交后页面刷新并保留数据与显示错误：AJAX与PHP实践-html教程-PHP中文网

避免表单提交后页面刷新并保留数据与显示错误：AJAX与PHP实践

本教程详细讲解如何通过前端 ajax技术与后端php配合，实现在表单提交后不刷新页面的前提下，进行数据验证、保留用户输入，并动态显示错误信息。文章将首先介绍传统php方式下保留表单数据的技巧，进而深入探讨使用javascript fetch api进行异步提交，以及后端php如何返回json响应，从而提供流畅的用户体验。

在构建Web应用时，用户体验至关重要。传统的HTML表单提交方式会导致页面完全刷新，这不仅打断了用户操作流程，还可能在验证失败时丢失用户已输入的数据，迫使用户重新填写，极大地降低了用户满意度。本教程将深入探讨两种解决方案：一种是在页面刷新后保留表单数据的PHP技巧，另一种是更现代、更流畅的AJAX异步提交方案，它能彻底阻止页面刷新，并实时反馈验证结果。

方案一：页面刷新后保留表单数据（PHP传统方式）

尽管此方案仍会导致页面刷新，但它解决了数据丢失的问题。核心思想是在表单输入字段的 value 属性中，动态填充用户上次提交的数据。当PHP处理表单并检测到错误时，它会重新渲染页面，但由于 value 属性的存在，用户之前输入的内容将得以保留。

HTML表单结构

为了在页面刷新后保留用户输入，我们需要修改每个输入字段的 value 属性，使其在PHP处理后能够回显 $_POST 数组中的对应值。同时，为了显示PHP返回的错误信息，我们预留一个 <span> 或 p 标签。

<form action="signup.php" id="form" method="POST">
    <a style="text-decoration:none;" href="index.php"><h1>Mero <span>Notes</span></h1></a>
    <h3>Register Your Account</h3>  
    <!-- 用于显示PHP处理后的错误信息 -->
    <p id="serverMessage" style="margin-top:10px;color:red;">
        <?php 
            // 检查会话中是否有错误消息，或者直接从PHP变量中获取
            if (isset($_SESSION['message'])) {
                echo $_SESSION['message'];
                unset($_SESSION['message']); // 显示后清除，避免重复显示
            } elseif (isset($message)) { // 如果PHP脚本直接设置了$message变量
                echo $message;
            }
        ?>
    </p>        
    <p id="validationSpan" style="color:orange;"></p> <!-- 用于前端验证或AJAX错误 -->

    <input placeholder="Full Name" type="text" required="required" name="fullName" 
           value="<?= isset($_POST['fullName']) ? htmlspecialchars($_POST['fullName']) : '' ?>"/>
    <input placeholder="Email" type="text" required="required" name="email" 
           value="<?= isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>"/>
    <input placeholder="Password" type="password" name="password" required="required" id="id_password" minlength="8" onkeyup="passValidation();"/>
    <input placeholder="Confirm Password" type="password" name="conPassword" required="required" id="id_conPassword" onkeyup="passValidation();"/>
    <input placeholder="Contact" type="number" required="required" name="contactNum" 
           value="<?= isset($_POST['contactNum']) ? htmlspecialchars($_POST['contactNum']) : '' ?>"/>
    <button type="submit" class="regButton" id="regBtn" onclick="return passValidationAlert()">SignUp</button>
    <h4 style="text-align: right; color:black;font-size:12px;">
        Already Have an Account ?
        <a class="buttomLogin" href="index.php">Login here</a>
    </h4>
</form>

登录后复制

解释：

立即学习“PHP免费学习笔记（深入）”；

value="<?= isset($_POST['fieldName']) ? htmlspecialchars($_POST['fieldName']) : '' ?>"：这行代码是关键。isset($_POST['fieldName']) 检查 $_POST 数组中是否存在名为 fieldName 的键（即用户是否提交过此字段）。如果存在，则将其值通过 htmlspecialchars() 函数转义后输出到 value 属性中，防止XSS攻击。如果不存在，则输出空字符串。
<p id="serverMessage">：用于显示PHP后端处理后返回的错误或成功消息。

PHP后端逻辑

当PHP脚本处理表单时，如果检测到验证错误，它不应立即重定向，而是设置一个错误消息变量（例如 $message 或存储到 $_SESSION['message']），然后让页面正常加载，这样HTML中的PHP代码就能捕获并显示这个消息。

<?php
session_start(); // 确保开启session
$message = ''; // 初始化消息变量

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 获取并清理表单数据
    $fullName = htmlspecialchars($_POST['fullName']);
    $email = htmlspecialchars($_POST['email']);
    $password = $_POST['password'];
    $confirmPassword = $_POST['conPassword'];
    $phoneNumber = htmlspecialchars($_POST['contactNum']);

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

    // 示例验证逻辑
    $email_check_sql = "SELECT * FROM signupdatabasemn WHERE email = '$email'";
    $result = mysqli_query($conn, $email_check_sql);

    if (mysqli_num_rows($result) > 0) {
        $message = 'The Entered Email is Already Taken';
        // 或者 $_SESSION['message'] = 'The Entered Email is Already Taken';
    } elseif ($password != $confirmPassword) {
        $message = 'Password did not match';
        // 或者 $_SESSION['message'] = 'Password did not match';
    } else {
        // 密码哈希
        $epassword = password_hash($password, PASSWORD_BCRYPT);
        $sql = "INSERT INTO signupdatabasemn (fullName, email, password, phoneNumber) 
                VALUES ( '$fullName', '$email', '$epassword', '$phoneNumber') ";
        $result2 = mysqli_query($conn, $sql);

        if ($result2) {
            // 成功注册，重定向到登录页
            $_SESSION['message'] = 'Registration successful! Please login.'; // 存储成功消息
            header('Location: /demosite3fnl/index.php');
            exit();
        } else {
            $message = 'Database error: Could not register.';
            // 或者 $_SESSION['message'] = 'Database error: Could not register.';
        }
    }
}
// 如果有错误消息，它会在页面顶部被显示
// 如果没有错误，且没有重定向，页面会正常加载
?>

登录后复制

注意事项：

安全性： 在实际应用中，务必对所有用户输入进行严格的清理和验证，包括使用预处理语句防止SQL注入，以及对输出进行HTML转义防止XSS攻击。
用户体验： 尽管数据得以保留，但页面刷新仍然会带来不佳的用户体验。

方案二：使用AJAX实现无刷新表单提交（推荐）

为了彻底解决页面刷新问题，并提供更流畅的用户体验，我们应该采用AJAX（Asynchronous JavaScript and XML）技术。AJAX允许在不刷新整个页面的情况下，通过JavaScript向服务器发送请求并处理响应。

核心思路

阻止默认提交： 使用JavaScript阻止表单的默认提交行为。
异步发送数据： 通过 fetch API 或 XMLHttpRequest 将表单数据异步发送到服务器。
服务器响应： PHP后端处理数据，并返回JSON格式的响应，包含验证结果、错误信息或成功状态。
前端处理响应： JavaScript接收JSON响应，根据响应内容动态更新页面（显示错误、清空表单、重定向等）。

HTML表单调整

我们不再需要PHP在 value 属性中回显数据，因为页面不会刷新。但我们需要一个 id 来方便JavaScript选择表单，并预留一个 <span> 来显示AJAX返回的错误信息。

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

279

查看详情

<form action="signup.php" id="signupForm" method="POST">
    <a style="text-decoration:none;" href="index.php"><h1>Mero <span>Notes</span></h1></a>
    <h3>Register Your Account</h3>  
    <p id="serverMessage" style="margin-top:10px;color:red;"></p> <!-- 用于显示AJAX返回的错误 -->

    <input placeholder="Full Name" type="text" required="required" name="fullName"/>
    <input placeholder="Email" type="text" required="required" name="email"/>
    <input placeholder="Password" type="password" name="password" required="required" id="id_password" minlength="8" onkeyup="passValidation();"/>
    <input placeholder="Confirm Password" type="password" name="conPassword" required="required" id="id_conPassword" onkeyup="passValidation();"/>
    <input placeholder="Contact" type="number" required="required" name="contactNum"/>
    <button type="submit" class="regButton" id="regBtn">SignUp</button>
    <h4 style="text-align: right; color:black;font-size:12px;">
        Already Have an Account ?
        <a class="buttomLogin" href="index.php">Login here</a>
    </h4>
</form>

登录后复制

关键改动：

id="signupForm"：方便JavaScript选择。
action="signup.php"：仍指向PHP处理脚本。
移除了 value="<?= ... ?>" 因为不再需要回显。
<p id="serverMessage"> 将用于显示AJAX响应中的错误。

JavaScript (AJAX) 逻辑

我们将使用 fetch API 来发送异步请求，这是现代浏览器推荐的AJAX实现方式。

document.addEventListener('DOMContentLoaded', function() {
    const signupForm = document.getElementById('signupForm');
    const serverMessage = document.getElementById('serverMessage');

    signupForm.addEventListener('submit', async function(event) {
        event.preventDefault(); // 阻止表单默认提交行为，防止页面刷新

        serverMessage.textContent = ''; // 清空之前的错误信息

        // 获取表单数据
        const formData = new FormData(this); // 'this' 指向 signupForm

        try {
            const response = await fetch(this.action, {
                method: this.method,
                body: formData // 将FormData对象作为请求体发送
            });

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

            if (result.success) {
                serverMessage.style.color = 'green';
                serverMessage.textContent = result.message;
                // 成功后可以清空表单或重定向
                this.reset(); // 清空表单
                // 或者 window.location.href = '/demosite3fnl/index.php'; // 重定向
            } else {
                serverMessage.style.color = 'red';
                serverMessage.textContent = result.message;
                // 错误时，表单数据已在页面上，无需额外处理
            }
        } catch (error) {
            console.error('Error during form submission:', error);
            serverMessage.style.color = 'red';
            serverMessage.textContent = 'An unexpected error occurred. Please try again.';
        }
    });
});

// 示例：密码验证函数 (如果需要前端实时验证)
function passValidation() {
    const password = document.getElementById('id_password').value;
    const confirmPassword = document.getElementById('id_conPassword').value;
    const validationSpan = document.getElementById('validationSpan');

    if (password === '' || confirmPassword === '') {
        validationSpan.textContent = '';
        return true;
    }

    if (password !== confirmPassword) {
        validationSpan.textContent = 'Passwords do not match.';
        return false;
    } else {
        validationSpan.textContent = '';
        return true;
    }
}

// 示例：提交按钮点击时的额外验证 (如果需要)
function passValidationAlert() {
    if (!passValidation()) {
        alert('Passwords do not match!');
        return false;
    }
    return true; // 如果通过，AJAX会处理提交
}

登录后复制

解释：

立即学习“PHP免费学习笔记（深入）”；

event.preventDefault()：这是阻止页面刷新的关键。
new FormData(this)：方便地从表单元素中获取所有输入数据。
fetch(this.action, { method: this.method, body: formData })：向表单的 action URL 发送一个POST请求，请求体是表单数据。
response.json()：将服务器返回的JSON字符串解析为JavaScript对象。
根据 result.success 属性判断操作是否成功，并更新 serverMessage 元素。

PHP后端逻辑（返回JSON响应）

当使用AJAX时，PHP脚本不应执行 header('Location: ...') 重定向，而应根据处理结果构建一个JSON对象，并通过 echo json_encode(...) 返回给前端。

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

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

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

    // 简单的服务端验证
    if (empty($fullName) || empty($email) || empty($password) || empty($confirmPassword) || empty($phoneNumber)) {
        $response['message'] = 'All fields are required.';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $response['message'] = 'Invalid email format.';
    } elseif ($password !== $confirmPassword) {
        $response['message'] = 'Password did not match.';
    } elseif (strlen($password) < 8) {
        $response['message'] = 'Password must be at least 8 characters long.';
    } else {
        // 假设 $conn 是数据库连接
        // $conn = mysqli_connect("localhost", "user", "password", "database");

        // 检查邮箱是否已注册
        $stmt_check = $conn->prepare("SELECT id FROM signupdatabasemn WHERE email = ?");
        $stmt_check->bind_param("s", $email);
        $stmt_check->execute();
        $stmt_check->store_result();

        if ($stmt_check->num_rows > 0) {
            $response['message'] = 'The Entered Email is Already Taken.';
        } else {
            // 密码哈希
            $epassword = password_hash($password, PASSWORD_BCRYPT);

            // 插入新用户
            $stmt_insert = $conn->prepare("INSERT INTO signupdatabasemn (fullName, email, password, phoneNumber) VALUES (?, ?, ?, ?)");
            $stmt_insert->bind_param("ssss", $fullName, $email, $epassword, $phoneNumber);

            if ($stmt_insert->execute()) {
                $response['success'] = true;
                $response['message'] = 'Registration successful! You can now log in.';
                // 成功后，如果需要重定向，可以在前端JS中处理
            } else {
                $response['message'] = 'Database error: Could not register. ' . $stmt_insert->error;
            }
            $stmt_insert->close();
        }
        $stmt_check->close();
    }
} else {
    $response['message'] = 'Invalid request method.';
}

echo json_encode($response);
exit(); // 确保脚本在此处停止执行，不再输出其他内容
?>

登录后复制

关键改动：

header('Content-Type: application/json');：告知浏览器响应内容是JSON格式。
$response = ['success' => false, 'message' => ''];：定义一个关联数组来存储响应数据。
根据验证和数据库操作的结果，设置 $response['success'] 为 true 或 false，并填充 $response['message']。
echo json_encode($response);：将PHP数组转换为JSON字符串并输出。
exit();：确保在输出JSON后立即终止脚本，防止额外的HTML或其他内容混入JSON响应中。
安全性： 使用 mysqli_prepare 和 bind_param 来防止SQL注入。

总结与最佳实践

选择方案： 对于现代Web应用，强烈推荐使用AJAX方案。它提供了更好的用户体验，减少了服务器负载（在某些情况下），并允许更复杂的交互。
客户端与服务器端验证： 始终在服务器端进行数据验证，因为客户端验证容易被绕过。客户端验证（如JavaScript的 passValidation()）可以提供即时反馈，提升用户体验，但不能替代服务器端验证。
错误信息： 提供清晰、友好的错误信息，帮助用户理解问题并进行修正。
用户反馈： 在AJAX请求发送期间，可以显示一个加载指示器（例如旋转图标），告知用户操作正在进行中，避免用户重复点击。
安全性： 除了SQL注入和XSS，还应考虑CSRF（跨站请求伪造）保护。在AJAX请求中，可以通过在请求头或表单数据中包含CSRF令牌来防御。

通过以上两种方案，特别是AJAX异步提交，您可以有效地解决表单提交后页面刷新和数据丢失的问题，从而显著提升Web应用的可用性和用户体验。

以上就是避免表单提交后页面刷新并保留数据与显示错误：AJAX与PHP实践的详细内容，更多请关注php中文网其它相关文章！