PHP AJAX 表单提交：解决页面刷新并优雅地显示通知-php教程-PHP中文网

PHP AJAX 表单提交：解决页面刷新并优雅地显示通知

本文详细介绍了如何使用 PHP 和 AJAX 实现无刷新表单提交，并在成功提交后显示弹窗通知。核心在于利用 JavaScript 的 event.preventDefault() 方法阻止表单的默认提交行为，结合 jQuery AJAX 发送数据到后端处理，并根据服务器响应动态更新前端界面，从而提升用户体验。

引言：无刷新表单提交的必要性

在现代 web 应用中，用户体验至关重要。传统的 html 表单提交方式会导致整个页面刷新，这不仅中断了用户操作流程，也可能造成不必要的等待时间。通过结合使用 php 和 ajax（asynchronous javascript and xml），我们可以实现无刷新表单提交，即在不重新加载页面的情况下，将表单数据发送到服务器进行处理，并在成功或失败后向用户显示即时反馈，例如弹窗通知。

理解问题：为何页面会自动刷新？

最初尝试使用 AJAX 提交表单时，尽管 JavaScript 的 alert() 提示成功，但页面仍然会自动刷新或重定向。这是因为浏览器对 HTML 表单有默认的提交行为。当一个

元素被提交时，无论是否触发了 AJAX 请求，浏览器都会尝试将数据发送到 action 属性指定的 URL，并加载该 URL 返回的页面。

考虑以下初始代码结构：

HTML 表单示例：

<form action="form-process" id="reportsForm" method="POST">
    <!-- 表单字段 -->
    <input type="text" id="ccc_employee" name="ccc_employee" placeholder="员工编号">
    <input type="text" id="IR_number" name="ir_number" placeholder="IR 编号">
    <!-- 更多表单字段 -->
    <button type="submit">提交报告</button>
</form>

登录后复制

PHP 路由配置示例 (routes.php)：

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

// ... 其他路由
// 报告表单提交路由
post('/form-process', '/backend/form-process.php');

登录后复制

初步尝试的 AJAX 代码：

$(document).ready(function() {
    $("#reportsForm").submit(function() {
        var cccEmployee = $("#ccc_employee").val();
        var irNumber = $("#IR_number").val();
        // ... 收集其他表单字段

        $.ajax({
            type: "POST",
            url: "./backend/form-process.php", // AJAX 请求的目标 URL
            success: function() {
                alert("提交成功！"); // 弹窗提示
            }
        });
        // 问题在于，即使 AJAX 请求被发送，浏览器的默认表单提交行为依然会发生
    });
});

登录后复制

在这种情况下，alert("提交成功！") 可能会短暂显示，但随后页面会立即刷新或跳转到 form-process 路由处理后的页面，导致用户体验不佳。

核心解决方案：阻止默认事件 event.preventDefault()

要解决页面刷新问题，关键在于阻止浏览器对表单的默认提交行为。在 jQuery 的 submit 事件处理函数中，我们可以通过传入事件对象并调用其 preventDefault() 方法来实现。

修改后的 AJAX 代码如下：

趣问问AI

免费可用的国内版chat，AI写作和AI对话

查看详情

$(document).ready(function() {
    $("#reportsForm").submit(function(e) { // 传入事件对象 'e'
        e.preventDefault(); // 阻止表单的默认提交行为

        // ... 后续的 AJAX 逻辑
        var cccEmployee = $("#ccc_employee").val();
        var irNumber = $("#IR_number").val();
        var caseType = $("#case_type").val();
        var caseLocation = $("#caseLocation").val();
        var startDateTime = $("#startDate").val();
        var endDateTime = $("#endDate").val();
        var caseDesc = $("#case_description").val();
        var actionsTaken = $("#action_taken").val();
        var caseDetails = $("#details").val();
        var caseNotes = $("#notes").val();
        var caseRecommendation = $("#recommendation").val();

        $.ajax({
            type: "POST",
            url: "./backend/form-process.php", // AJAX 请求的目标 URL
            data: { // 关键：通过 'data' 属性发送表单数据
                ccc_employee: cccEmployee,
                ir_number: irNumber,
                case_type: caseType,
                case_location: caseLocation,
                start_date_time: startDateTime,
                end_date_time: endDateTime,
                case_desc: caseDesc,
                actions_taken: actionsTaken,
                case_details: caseDetails,
                case_notes: caseNotes,
                case_recommendation: caseRecommendation
            },
            success: function(response) {
                // 根据服务器响应处理成功逻辑
                console.log("服务器响应：", response);
                if (response.status === 'success') {
                    showCustomNotification(response.message, 'success');
                    // 可选：清空表单或重定向
                    // $("#reportsForm")[0].reset();
                } else {
                    showCustomNotification(response.message, 'error');
                }
            },
            error: function(xhr, status, error) {
                // 处理 AJAX 请求失败的情况
                console.error("AJAX 请求失败：", status, error);
                showCustomNotification("表单提交失败，请重试。", 'error');
            }
        });
    });
});

登录后复制

通过 e.preventDefault()，我们确保了表单的默认提交行为被抑制，从而允许 AJAX 请求独立完成，并在其回调函数中处理后续逻辑，而不会导致页面刷新。

完善 AJAX 请求：数据传输与后端处理

为了使 AJAX 表单提交真正有效，我们需要确保以下两点：

前端正确发送表单数据： 在 $.ajax() 方法中，使用 data 属性将收集到的表单字段作为键值对发送到服务器。
后端正确接收和处理数据： PHP 脚本应通过 $_POST 全局变量接收数据，进行处理（如验证、存储到数据库），并返回一个响应（通常是 JSON 格式）。

后端 PHP 处理 (backend/form-process.php)

后端 PHP 脚本负责接收 AJAX 请求发送的数据，执行业务逻辑（如数据验证、数据库操作），并返回一个结构化的响应，通常是 JSON 格式，以便前端可以根据响应内容进行相应的操作。

<?php
// backend/form-process.php

// 设置响应头为 JSON 格式，告知浏览器这是一个 JSON 响应
header('Content-Type: application/json');

// 检查请求方法是否为 POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 从 $_POST 数组中获取前端发送的数据
    $cccEmployee = $_POST['ccc_employee'] ?? '';
    $irNumber = $_POST['ir_number'] ?? '';
    $caseType = $_POST['case_type'] ?? '';
    $caseLocation = $_POST['case_location'] ?? '';
    $startDateTime = $_POST['start_date_time'] ?? '';
    $endDateTime = $_POST['end_date_time'] ?? '';
    $caseDesc = $_POST['case_desc'] ?? '';
    $actionsTaken = $_POST['actions_taken'] ?? '';
    $caseDetails = $_POST['case_details'] ?? '';
    $caseNotes = $_POST['case_notes'] ?? '';
    $caseRecommendation = $_POST['case_recommendation'] ?? '';

    // -------- 数据验证示例 --------
    if (empty($cccEmployee) || empty($irNumber)) {
        echo json_encode(['status' => 'error', 'message' => '员工编号和IR编号为必填项。']);
        exit(); // 停止脚本执行
    }
    // 更多验证逻辑...

    // -------- 模拟数据库插入操作 --------
    // 在实际应用中，这里会包含连接数据库、准备 SQL 语句、执行插入等操作
    try {
        // 示例：
        // $pdo = new PDO("mysql:host=localhost;dbname=your_db", "user", "password");
        // $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        // $stmt = $pdo->prepare("INSERT INTO reports (ccc_employee, ir_number, case_type, ...) VALUES (?, ?, ?, ...)");
        // $stmt->execute([$cccEmployee, $irNumber, $caseType, ...]);

        // 如果数据库操作成功，返回成功响应
        echo json_encode(['status' => 'success', 'message' => '报告已成功提交并保存。']);

    } catch (PDOException $e) {
        // 数据库操作失败，返回错误响应
        error_log("数据库错误: " . $e->getMessage()); // 记录错误日志
        echo json_encode(['status' => 'error', 'message' => '数据保存失败，请稍后再试。']);
    }

} else {
    // 如果不是 POST 请求，返回错误
    echo json_encode(['status' => 'error', 'message' => '无效的请求方法。请使用 POST 请求。']);
}
?>

登录后复制

前端通知的实现：从 alert 到自定义弹窗

虽然 alert() 可以用于简单的测试，但在生产环境中，我们通常会使用更美观、更友好的自定义弹窗或通知条。以下是一个简单的自定义弹窗实现示例。

HTML 结构：

在页面中添加一个用于显示通知的 div 元素，并设置初始样式为隐藏。

<!-- 放置在 <body> 标签内的任意位置，建议靠近顶部 -->
<div id="notificationPopup" style="display:none; position: fixed; top: 20px; right: 20px; background-color: #4CAF50; color: white; padding: 15px; border-radius: 5px; z-index: 1000; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
    <span id="notificationMessage"></span>
    <span style="float: right; cursor: pointer; margin-left: 10px; font-weight: bold;" onclick="document.getElementById('notificationPopup').style.display='none';">&times;</span>
</div>

登录后复制

JavaScript 函数：

创建一个 JavaScript 函数来控制弹窗的显示、内容和样式。

function showCustomNotification(message, type = 'success') {
    const popup = $('#notificationPopup');
    const msgSpan = $('#notificationMessage');

    msgSpan.text(message); // 设置通知内容

    // 根据类型设置背景颜色
    if (type === 'success') {
        popup.css('background-color', '#4CAF50'); // 绿色
    } else if (type === 'error') {
        popup.css('background-color', '#f44336'); // 红色
    } else if (type === 'info') {
        popup.css('background-color', '#2196F3'); // 蓝色
    }

    popup.fadeIn(); // 淡入显示
    // 3秒后淡出隐藏
    setTimeout(function() {
        popup.fadeOut();
    }, 3000);
}

登录后复制

现在，在 AJAX 的 success 和 error 回调中，就可以调用 showCustomNotification 函数来显示更友好的通知了。

// 在 AJAX success 回调中
success: function(response) {
    console.log("服务器响应：", response);
    if (response.status === 'success') {
        showCustomNotification(response.message, 'success');
        $("#reportsForm")[0].reset(); // 提交成功后清空表单
    } else {
        showCustomNotification(response.message, 'error');
    }
},
// 在 AJAX error 回调中
error: function(xhr, status, error) {
    console.error("AJAX 请求失败：", status, error);
    showCustomNotification("表单提交失败，请检查网络或重试。", 'error

登录后复制

以上就是PHP AJAX 表单提交：解决页面刷新并优雅地显示通知的详细内容，更多请关注php中文网其它相关文章！