弹出窗口显示来自 php 和 javascript 的结果

我正在尝试实现 javascript 来显示 php 的结果。

基本上，我有一个登录页面。对于登录失败，我希望结果显示在弹出窗口中，而不是仅仅用 php 回显它们。

我尝试实现警报框，但看起来我错过了一些东西。

成功登录将被重定向到logged.php并会显示详细信息UserName and 登录状态.

如果登录失败，因为我使用的是存储过程LoginStatus会自动显示操作失败的错误信息。

这是我的完整代码fiddle https://jsfiddle.net/2dqmuc87/

这是我的登录页面。

登录.php

$stmt=odbc_exec($conn,"CALL UserLogin (".$_POST['UserId'].",'".$_POST['UserPwd']."','".$_POST['ModuleCd']."','".$_POST['SubModuleCd']."')");

if (!$stmt)
{
"Error : " . odbc_errormsg();
}

if (odbc_fetch_row($stmt))
{

$Username=odbc_result($stmt,"Username");
$LoginStatus=odbc_result($stmt,"LoginStatus");
}

/*Succesful Login*/
if ($LoginStatus==1)
{

$_SESSION["Username"]=$Username;
$_SESSION["LoginStatus"]=$LoginStatus;
header("Location: logged.php");
}

else

/*Fail Login*/
echo $Username=odbc_result($stmt,"Username");
echo $LoginStatus=odbc_result($stmt,"LoginStatus");

html :

<form method="post" name="login">
  <input type="text" name="UserId" value="">
  <input type="password" name="UserPwd" value="">
  <input type="submit" name="login" value="Login">
  </form>

javascript:

<script type="text/javascript">
     /*message of fail login*/
            function show_alert() {
                if (LoginStatus != 1) {
                    alert(LoginStatus);
                }
    
    
            </script>

有什么建议吗？

您必须使用 Ajax 向 PHP 发送数据并获取答案并显示弹出消息

HTML :

<form id="login" action="#" method="POST">

            <input type="text" name="username" value="" placeholder="Username" />

            <input type="password" name="password" value="" placeholder="Password" />

            <button id="submit" > Submit </button>

</form>

JS : (你需要 jQuery 库)

jQuery(document).ready(function()
{
jQuery("#login").submit(function(event)
{
    jQuery.ajax(
    {
        url: "login.php",
        type: "POST",
        dataType: "html",
        data: jQuery("#login").serialize(),

        success: function(data)
        {
            if(data == "failed")
            {
                alert("LoginStatus"); // If you want send the variable LoginStatus from PHP to JS, you have to get data back using Json !
            }
            else if(data == "success")
            {
                window.location.href = "logged.php";
            }
        }
    });
    return false;
});
});

PHP :

使用您的 PHP 代码并检查任何条件是真还是假，并将其回显为“失败”或“成功”。