如何在PHP抛出异常时用jQuery实现错误提示div定时淡出？

修正现有代码的基础问题 #

• 原displayError函数内赋值的$errorMessage是函数局部变量，作用域仅在函数内部，外部页面无法读取到赋值结果，需要将变量作用域提升到页面可访问层级
• 原HTML中的错误输出语句<?php $errorMessage ?>缺少echo语法，即便变量有值也不会渲染到页面，需补充输出逻辑，同时加htmlspecialchars转义避免XSS注入风险

修正后的PHP核心逻辑参考：

// 页面顶部初始化错误变量，避免未定义变量报错
$errorMessage = '';
function displayError($eMessage) {
    global $errorMessage;
    $errorMessage = $eMessage;
}

if(isset($_POST['log-in-btn'])) {
    $username = $_POST['username'];
    $password = $_POST['password'];
    try {
        // 原拼接SQL存在注入风险，此处补充转义逻辑
        $safeUsername = mysqli_real_escape_string($conn, $username);
        $safePassword = mysqli_real_escape_string($conn, $password);
        $sql = "SELECT * FROM User WHERE username = '$safeUsername' AND password = '$safePassword'";
        $result = mysqli_query($conn, $sql);
        if(mysqli_num_rows($result) == 1) {
            while ($row = mysqli_fetch_array($result, MYSQLI_NUM)) {
                $_SESSION['username'] = $row[0];
                $_SESSION['password'] = $row[1];
                $_SESSION['name'] = $row[2];
                $_SESSION['surname'] = $row[3];
                $_SESSION['email'] = $row[4];
            }
        } else {
            throw new Exception("Username and password doesn't exist");
        }
    } catch (Exception $e) {
        displayError($e->getMessage());
    }
}

调整提示框的默认状态 #

为了让后端渲染的错误提示有和前端校验一致的平滑动画，需要给提示框加默认隐藏的样式，避免页面加载时突兀展示静态内容：

<div id="error-message-box" style="display: none;">
    <h1 class="error-headline">Error!</h1>
    <p class="error-text"><?php echo htmlspecialchars($errorMessage ?? ''); ?></p>
</div>

复用现有JS逻辑实现自动触发 #

不需要做复杂的DOM可见性监听器——PHP是服务端渲染机制，页面加载完成时错误文本已经写入DOM，直接判断文本内容是否非空，就能触发和前端校验完全一致的显示、7秒后自动淡出的逻辑，完全复用你已经跑通的交互效果。

对应的JS代码和原有逻辑完全打通：

$(document).ready(function() {
    // 保留原有前端表单校验的提交逻辑
    $('form').submit(function () {
        var check = loginValidation($(this));
        if(check == false) {
            $("#error-message-box").fadeIn();
            $(".error-text").text("Fill in all the fields");
            $("#error-message-box").delay(7000).fadeOut();
        }
        return check;
    });

    // 新增：检测PHP后端抛出的错误，自动触发相同提示效果
    const backendErrorText = $(".error-text").text().trim();
    if(backendErrorText) {
        $("#error-message-box").fadeIn();
        $("#error-message-box").delay(7000).fadeOut();
    }
});

方案优势 #

• 无重复代码：后端、前端校验的报错走同一套提示组件，交互体验完全统一
• 逻辑稳定：直接读取DOM中已存在的错误文本判断状态，比监听div可见性的方案更少出现逻辑冲突
• 零额外依赖：不需要引入新的插件，完全基于你现有已验证可行的jQuery逻辑扩展

注意：不要把提示框的默认状态设为展示，哪怕后端有错误消息，也要通过JS触发fadeIn动画，否则用户看到的是无过渡的静态错误框，和前端校验的交互体验不一致。

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