如何使用toastr和PHP MySQL创建带动画的通知系统及调用各类消息

第一步：先确认依赖引入正确 #

你需要先检查inc/header.php中是否按顺序引入了以下资源，顺序错误会导致toastr不生效：

• 先引入jQuery库
• 再引入toastr的CSS文件
• 最后引入toastr的JS文件

第二步：全局配置toastr动画和样式（推荐写在inc/footer.php里，所有页面都生效） #

把下面这段JS代码加到footer.php的</body>标签之前，就能实现你要的带动画、带进度条的通知效果：

toastr.options = {
  "closeButton": true, // 显示关闭按钮
  "progressBar": true, // 显示倒计时进度条
  "positionClass": "toast-top-right", // 通知弹出位置，右上角
  "showDuration": "300", // 弹出动画时长
  "hideDuration": "1000", // 消失动画时长
  "timeOut": "5000", // 自动关闭等待时间，单位毫秒
  "extendedTimeOut": "1000", // 鼠标悬浮后额外等待时间
  "showEasing": "swing", // 弹出动画效果
  "hideEasing": "linear", // 消失动画效果
  "showMethod": "fadeIn", // 弹出动画方式
  "hideMethod": "fadeOut" // 消失动画方式
}

第三步：不同类型通知的调用方法 #

toastr自带四种通知类型，调用方式非常简单：

• 成功消息：toastr.success('消息内容', '可选标题')
• 警告消息：toastr.warning('消息内容', '可选标题')
• 错误消息：toastr.error('消息内容', '可选标题')
• 提示消息：toastr.info('消息内容', '可选标题')

第四步：修改你现有代码里的通知调用 #

你原来代码里添加失败的分支输出div是错误的，直接输出toastr的JS调用即可，修改后的PHP逻辑部分如下：

<?php
if(isset($_POST['add_mouja'])){
    $mouja_n = trim($_POST['mname']);
    $mouja_jal = trim($_POST['mjal']);
    
    // 可以先加前端没拦住的空值校验，弹出警告
    if(empty($mouja_n) || empty($mouja_jal)){
        echo '<script>toastr.warning("请填写完整的必填项")</script>';
    }else{
        if($addmouja->addMouja($mouja_n, $mouja_jal)){
            // 成功消息
            echo '<script>toastr.success("মৌজা添加成功")</script>';
        }else{
            // 错误消息
            echo '<script>toastr.error("添加失败，请检查数据后重试")</script>';
        }
    }
}
?>

修改完成后提交表单就能正常弹出对应类型的带动画通知。

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