ajax formdata提交表单 ajax表单提交

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

最初尝试使用 AJAX 提交表单时，尽管 JavaScript 的 alert() 提示成功，但页面仍然会自动刷新或重定向。这是因为浏览器对 HTML 表单有默认的提交行为。当一个 <form> 元素被提交时，无论是否触发了 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 路由处理后的页面，导致用户体验不佳。

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

修改后的 AJAX 代码如下：

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

$(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 表单提交真正有效，我们需要确保以下两点：

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

<?php// backend/form-process.php// 设置响应头为 JSON 格式，告知浏览器这是一个 JSON 响应header('Content-Type: application/json');// 检查请求方法是否为 POSTif ($_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() 可以用于简单的测试，但在生产环境中，我们通常会使用更美观、更友好的自定义弹窗或通知条。以下是一个简单的自定义弹窗实现示例。

在页面中添加一个用于显示通知的 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 函数来控制弹窗的显示、内容和样式。

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 表单提交：解决页面刷新并优雅地显示通知的详细内容，更多请关注乐哥常识网其它相关文章！