基于MDL框架：通过_POST/_GET触发TOAST展示PHP脚本执行结果

直接用原生JS+PHP就能搞定，不用依赖任何框架，简单易上手，下面是完整的实现步骤：

1. PHP处理并传递执行结果 #

不管是用POST提交表单，还是用GET传递结果，先把消息和类型（成功/失败）准备好，传给前端：

<?php
// 初始化消息变量
$message = '';
$messageType = '';

// 示例：处理表单提交的情况
if (isset($_POST['submit'])) {
    // 这里写你的PHP执行逻辑，比如数据库操作、文件处理等
    $operationSuccess = true; // 模拟执行结果，实际替换成你的判断逻辑

    if ($operationSuccess) {
        $message = '操作执行成功！';
        $messageType = 'success';
    } else {
        $message = '操作失败，请检查后重试！';
        $messageType = 'error';
    }
}

// 也可以直接读取GET参数（比如跳转后传递的结果）
// if (isset($_GET['message'])) {
//     $message = $_GET['message'];
//     $messageType = $_GET['type'] ?? 'info';
// }
?>

2. 原生JS实现Toast弹窗 #

直接在HTML里嵌入简单的CSS和JS，复制就能用，不用额外引入文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>操作结果通知</title>
    <style>
        /* Toast基础样式，可按需调整 */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 24px;
            border-radius: 4px;
            color: #fff;
            font-size: 14px;
            z-index: 9999;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease;
        }
        /* 显示动画 */
        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }
        /* 不同类型的背景色 */
        .toast.success { background-color: #4CAF50; }
        .toast.error { background-color: #f44336; }
        .toast.info { background-color: #2196F3; }
    </style>
</head>
<body>
    <!-- 你的页面内容，比如表单 -->
    <form method="post">
        <button type="submit" name="submit">执行操作</button>
    </form>

    <!-- 只有当有消息时才加载JS -->
    <?php if (!empty($message)): ?>
        <script>
            // 显示Toast的函数
            function showToast(message, type = 'info') {
                // 创建Toast元素
                const toast = document.createElement('div');
                toast.className = `toast ${type}`;
                toast.textContent = message;
                document.body.appendChild(toast);

                // 触发显示动画
                setTimeout(() => toast.classList.add('show'), 100);

                // 3秒后自动隐藏并移除元素
                setTimeout(() => {
                    toast.classList.remove('show');
                    setTimeout(() => document.body.removeChild(toast), 300);
                }, 3000);
            }

            // 调用函数展示PHP传递的消息
            showToast('<?php echo addslashes($message); ?>', '<?php echo $messageType; ?>');
        </script>
    <?php endif; ?>
</body>
</html>

关键说明 #

• addslashes($message)用来转义消息里的引号，避免JS语法报错
• Toast会自动在3秒后消失，不需要用户手动关闭
• 通过$messageType可以给不同状态的消息设置不同颜色，直观区分成功/失败
• 如果是PHP处理完后跳转页面，直接用header("Location: 目标页面?message=结果内容&type=success")传递参数即可

内容的提问来源于stack exchange，提问作者Heavenanvil