我想使用 div 添加弹出消息答案

【问题标题】：I want to add popup message using div我想使用 div 添加弹出消息
【发布时间】：2021-09-25 19:03:24
【问题描述】：

我想在成功或错误时显示其中的 2 个，但是当我尝试它时它只是在发布后不运行，因为当我点击提交更改时它会重新加载浏览器。

我想在 POST 之后打印一个包含该消息的 div，即使提交后网络会重新加载。

<div id="messageSuccess" class="alert alert-success alert-dismissible show fade">
    <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">
    <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>

<?php

require_once '../db_conn.php';
$userid = $_SESSION['user_id'];
$urlImgur = $_GET['urlAvatar'];
if (isset($_POST["changeAvatar"])){
    $sql = "UPDATE users SET `imgur`='$urlImgur' WHERE `user_id`='$userid'";
    $statement = $conn->prepare($sql);
    if ($statement->execute()) {     
        //I use this method before, but link very messy I want a clean error,
        //like other website throwing error with popup
        //header("Location: /user/settings?success-settings=Successfully Updated!");
        echo '<script type="text/javascript">
        var element = document.getElementById("messageSuccess");
        element.classList.remove("no-display");
        </script>'                           
    }
    else {
        //header("Location: /user/settings?error-settings=Error Updating!");
        echo '<script type="text/javascript">
        var element = document.getElementById("messageFailed");
        element.classList.remove("no-display");
        </script>'
    }
    $conn = null;
    $sql = null;
}
?>

【问题讨论】：

您可以使用preventDefault () 进行检查，看看是否出现错误

标签： javascript php html jquery

【解决方案1】：

解决我用了这种方法：

require_once '../db_conn.php';
$userid = $_SESSION['user_id'];

$urlImgur = $_GET['urlAvatar'];

if (isset($_POST["changeAvatar"])){
        $sql = "UPDATE users SET `imgur`='$urlImgur' WHERE `user_id`='$userid'";
        $statement = $conn->prepare($sql);
        if ($statement->execute()) {     
            header("Location: /user/settings?status=success");                         
        }
        else {
            header("Location: /user/settings?status=error");
        }
        $conn = null;
        $sql = null;
}

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

【讨论】：