PHP与AJAX表单提交：实现无刷新通知弹窗的专业指南

<form id="reportsForm" method="POST">
    <label for="ccc_employee">员工姓名:</label>
    <input type="text" id="ccc_employee" name="cccEmployee"><br><br>

    <label for="IR_number">IR 编号:</label>
    <input type="text" id="IR_number" name="irNumber"><br><br>

    <!-- 其他表单字段 -->
    <label for="case_type">案件类型:</label>
    <input type="text" id="case_type" name="caseType"><br><br>

    <button type="submit">提交报告</button>
</form>

$(document).ready(function() {
    $("#reportsForm").submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
        // 后续将在这里处理AJAX请求
    });
});

$(document).ready(function() {
    $("#reportsForm").submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为

        // 收集表单数据
        // 建议使用 .serialize() 或 .serializeArray() 方法来简化数据收集
        // 或者手动构建数据对象，确保键名与后端期望的$_POST键名一致
        var formData = {
            cccEmployee: $("#ccc_employee").val(),
            irNumber: $("#IR_number").val(),
            caseType: $("#case_type").val(),
            caseLocation: $("#caseLocation").val(),
            startDateTime: $("#startDate").val(),
            endDateTime: $("#endDate").val(),
            caseDesc: $("#case_description").val(),
            actionsTaken: $("#action_taken").val(),
            caseDetails: $("#details").val(),
            caseNotes: $("#notes").val(),
            caseRecommendation: $("#recommendation").val()
        };

        // 发送AJAX请求
        $.ajax({
            type: "POST",
            url: "./backend/form-process.php", // 确保URL正确指向后端处理脚本
                                               // 如果使用PHP路由库，URL可能是 '/form-process'
            data: formData, // 发送收集到的表单数据
            dataType: "json", // 预期服务器返回JSON格式的数据
            beforeSend: function() {
                // 可在此处显示加载指示器，提升用户体验
                console.log("正在提交表单...");
                // 例如：$("#loadingSpinner").show();
            },
            success: function(response) {
                // 根据服务器响应显示通知
                if (response.status === "success") {
                    showNotification("success", response.message || "表单已成功提交！");
                    // 提交成功后，可以清空表单或更新UI
                    $("#reportsForm")[0].reset(); // 重置表单
                } else {
                    showNotification("error", response.message || "表单提交失败，请重试。");
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理AJAX请求失败的情况（如网络错误、服务器500错误等）
                console.error("AJAX请求失败: " + textStatus, errorThrown, jqXHR.responseText);
                showNotification("error", "网络错误或服务器无响应，请稍后再试。");
            },
            complete: function() {
                // 无论成功或失败，都在此处隐藏加载指示器
                console.log("表单提交完成。");
                // 例如：$("#loadingSpinner").hide();
            }
        });
    });

    // 辅助函数：显示自定义通知弹窗
    function showNotification(type, message) {
        // 创建一个通知元素并添加到页面
        var notificationDiv = $("<div class='notification " + type + "'></div>").text(message);
        $("body").append(notificationDiv);

        // 简单的动画效果：淡入、停留、淡出并移除
        notificationDiv.fadeIn().delay(3000).fadeOut(500, function() {
            $(this).remove();
        });
    }
});

<style>
    .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 25px;
        border-radius: 5px;
        color: white;
        font-weight: bold;
        display: none; /* 默认隐藏 */
        z-index: 1000;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .notification.success {
        background-color: #4CAF50; /* 绿色 */
    }
    .notification.error {
        background-color: #f44336; /* 红色 */
    }
</style>

<?php
// 设置响应头，告知浏览器返回的是JSON格式
header('Content-Type: application/json');

// 检查请求方法是否为POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 实际应用中，这里需要对$_POST数据进行严格的验证、过滤和消毒
    // 以防止SQL注入、XSS等安全问题

    // 示例：获取前端发送的数据
    $cccEmployee = $_POST['cccEmployee'] ?? '';
    $irNumber = $_POST['irNumber'] ?? '';
    // ... 获取其他表单字段

    // 模拟数据处理逻辑，例如保存到数据库
    // 在实际项目中，这里会包含数据库连接、SQL查询等操作
    $isSuccess = false; // 假设初始操作失败

    try {
        // 假设这里是数据库插入/更新操作
        // 例如：
        // $stmt = $pdo->prepare("INSERT INTO reports (...) VALUES (...)");
        // $stmt->execute([...]);
        // $isSuccess = true; // 如果数据库操作成功

        // 模拟成功
        if (!empty($cccEmployee) && !empty($irNumber)) { // 简单模拟验证
             $isSuccess = true;
        } else {
             throw new Exception("员工姓名和IR编号不能为空。");
        }

    } catch (Exception $e) {
        // 捕获处理过程中的异常
        $isSuccess = false;
        $errorMessage = $e->getMessage();
    }


    if ($isSuccess) {
        // 操作成功，返回成功状态和消息
        echo json_encode([
            'status' => 'success',
            'message' => '数据已成功保存到数据库！'
        ]);
    } else {
        // 操作失败，返回错误状态和消息
        echo json_encode([
            'status' => 'error',
            'message' => $errorMessage ?? '数据保存失败，请检查输入或联系管理员。'
        ]);
    }
} else {
    // 如果不是POST请求，返回错误
    http_response_code(405); // Method Not Allowed
    echo json_encode([
        'status' => 'error',
        'message' => '无效的请求方法。'
    ]);
}
?>