使用 AJAX 实现 PHP 表单提交后的弹出通知-php教程-PHP中文网

使用 AJAX 实现 PHP 表单提交后的弹出通知

DDD

发布： 2025-10-10 12:06:38

原创

556人浏览过

使用 ajax 实现 php 表单提交后的弹出通知

本文介绍了如何使用 AJAX 在 PHP 表单成功提交后显示弹出通知，并解决表单自动重定向的问题。通过 preventDefault() 方法阻止表单的默认提交行为，并使用 AJAX 将表单数据异步发送到服务器，成功后显示弹出通知，从而提升用户体验。

阻止表单默认提交行为

表单在提交时，浏览器会默认刷新页面或跳转到 action 属性指定的 URL。为了使用 AJAX 异步提交表单，需要阻止这一默认行为。可以使用 JavaScript 中的 preventDefault() 方法来实现。

$("#reportsForm").submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交
    // ... 其他代码
});

登录后复制

在上述代码中，e 是事件对象，e.preventDefault() 方法阻止了表单的默认提交行为。

使用 AJAX 提交表单数据

阻止了表单的默认提交行为后，就可以使用 AJAX 将表单数据异步发送到服务器。

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

$("#reportsForm").submit(function(e) {
    e.preventDefault();
    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",
        data: {
            cccEmployee: cccEmployee,
            irNumber: irNumber,
            caseType: caseType,
            caseLocation: caseLocation,
            startDateTime: startDateTime,
            endDateTime: endDateTime,
            caseDesc: caseDesc,
            actionsTaken: actionsTaken,
            caseDetails: caseDetails,
            caseNotes: caseNotes,
            caseRecommendation: caseRecommendation
        },
        success: function(response) {
            // 在此处处理服务器返回的数据
            alert("提交成功！"); // 显示弹出通知
        },
        error: function(xhr, status, error) {
            // 处理错误
            alert("提交失败！");
            console.error("Error:", status, error);
        }
    });
});

登录后复制

代码解释:

data: 将表单数据作为对象传递给 data 属性。服务器端可以使用 $_POST 数组访问这些数据。
success: success 回调函数在服务器成功处理请求后执行。可以在这里显示弹出通知或其他操作。注意，response 参数包含了服务器返回的数据，根据实际情况进行处理。
error: error 回调函数在请求失败时执行。可以在这里显示错误信息或进行其他处理。

服务器端处理 (form-process.php)

在服务器端，需要处理接收到的表单数据，并返回适当的响应。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

<?php
// form-process.php

// 接收数据
$cccEmployee = $_POST['cccEmployee'];
$irNumber = $_POST['irNumber'];
// ... 其他数据

// 进行数据验证和处理
// ...

// 连接数据库并保存数据
// ...

// 返回JSON响应
$response = array('status' => 'success', 'message' => '表单提交成功！');
header('Content-Type: application/json');
echo json_encode($response);

?>

登录后复制

代码解释:

$_POST: 使用 $_POST 数组访问通过 AJAX 传递的表单数据。
json_encode: 将 PHP 数组编码为 JSON 格式，以便在客户端进行处理。
header('Content-Type: application/json'): 设置响应头，告诉浏览器返回的是 JSON 数据。

弹出通知的实现方式

上面的示例使用了简单的 alert() 函数来显示弹出通知。在实际项目中，可以使用更美观、更用户友好的方式来实现弹出通知，例如使用 jQuery UI 的 Dialog 组件、Bootstrap 的 Modal 组件，或者自定义的 CSS 样式。

示例 (使用 jQuery UI Dialog):

首先，确保已经引入了 jQuery 和 jQuery UI 库。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

登录后复制

然后，在 AJAX 的 success 回调函数中使用 jQuery UI Dialog 组件显示弹出通知。

success: function(response) {
    // 显示弹出通知
    $("<div></div>").html("表单提交成功！").dialog({
        title: "提示",
        buttons: {
            "确定": function() {
                $(this).dialog("close");
            }
        }
    });
}

登录后复制