如何用div实现POST提交后页面重载仍展示成功/错误弹窗消息

你的代码失效的核心原因：POST请求处理完成后触发页面重载时，你直接echo输出的JS脚本会跟随原请求的响应失效，跳转后的新页面没有收到展示弹窗的信号，自然不会触发弹窗逻辑。以下是具体修改步骤：

步骤1：添加默认隐藏样式 #

先给弹窗添加默认隐藏规则，页面初始加载时不显示弹窗：

/* 加入你的样式文件或者页面style标签中 */
.no-display {
    display: none !important;
}

修改HTML给两个弹窗默认加上隐藏类：

<div id="messageSuccess" class="alert alert-success alert-dismissible show fade no-display">
    <div class="alert-body">
        <button class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
            Congrats, Settings successfully updated! You may required to relogin to see the changes [<a style="color: #0E880B;" href="/logout">Logout</a>].
    </div>
</div>         
  
<div id="messageFailed" class="alert alert-danger alert-dismissible show fade no-display">
    <div class="alert-body">
        <button class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
            Oh no, Settings failed to update! Please try again later.
    </div>
</div>

步骤2：修改PHP后端逻辑，用SESSION存储操作状态 #

SESSION可以跨请求保存状态，不会在地址栏暴露参数，符合你需要干净URL的需求：

<?php
session_start(); // 必须放在代码最顶部，确保SESSION正常读写
require_once '../db_conn.php';
$userid = $_SESSION['user_id'];
// 修复SQL注入风险：不要直接拼接参数到SQL语句中
$urlImgur = $_GET['urlAvatar'] ?? '';
if (isset($_POST["changeAvatar"])){
    $sql = "UPDATE users SET `imgur`=? WHERE `user_id`=?";
    $statement = $conn->prepare($sql);
    $status = $statement->execute([$urlImgur, $userid]);
    if ($status) {     
        $_SESSION['op_status'] = 'success';
    } else {
        $_SESSION['op_status'] = 'error';
    }
    $conn = null;
    $sql = null;
    // 跳转到设置页触发重载
    header("Location: /user/settings");
    exit(); // 必须加exit终止后续代码执行
}
?>

步骤3：在设置页添加状态判断逻辑 #

在settings页面的HTML渲染之前读取SESSION状态，控制弹窗显示，读取完成后立刻清空SESSION避免重复弹窗：

<?php
session_start();
$opStatus = $_SESSION['op_status'] ?? '';
// 用完立即清空状态，避免下次刷新重复弹出
unset($_SESSION['op_status']);
?>
<!-- 这段JS放在页面底部，等DOM加载完成后执行 -->
<?php if ($opStatus): ?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    const targetId = '<?php echo $opStatus === 'success' ? 'messageSuccess' : 'messageFailed' ?>';
    document.getElementById(targetId).classList.remove('no-display');
    // 可选配置：3秒后自动关闭弹窗
    setTimeout(() => {
        document.getElementById(targetId).classList.add('no-display');
    }, 3000);
})
</script>
<?php endif; ?>

额外注意事项 #

你之前的预处理SQL写法没有起到防注入的作用，必须改成参数绑定的写法，避免恶意提交的参数篡改数据库。如果不想用SESSION，也可以用前端localStorage存储状态，跳转后读取并清除，但SESSION的可靠性更高，不会因为用户清理缓存失效。

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