弹出窗口以使用javascript显示php的结果

Question

I'm trying to implement javascript to display result from php.

Basically, I have a login page. For fail login, instead of just echoing them with php, I want the result to be display in a popup.

I try to implement the alert box but looks like I miss something.

Successful login will be redirect to logged.php and will display the details of UserName and LoginStatus .

If the login failed, since I'm using stored procedure the LoginStatus will automatically displayed the error message of the fail operation.

Here's my full code fiddle

This is my login page.

login.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> 

Any suggestion?

Answer 1

 <form method="post" name="login"> <input type="text" name="UserId" id="UserId" value=""> <input type="password" name="UserPwd" id="UserPwd" value=""> <input type="button" onclick="xhr();" name="login" value="Login"> </form> 

 function xhr(){ var un=document.getElementById('UserId').value; var pw=document.getElementById('UserPwd').value; //assume that x is the XHR object x = new XMLHttpRequest(); x.open("POST","login.php",true); x.setRequestHeader("Content-type","application/x-www-form-urlencoded"); var params="UserId="+un+"&UserPwd="+pw; x.send(params); x.onreadystatechange=function(){ if(x.readyState==4 && x.status==200){ checkLogin(x.responseText); } } } function checkLogin(x){ if(x != 1) alert("Login failed"); else window.location.href="logged.php"; } 

The PHP server page should echo only "1" or ~1 (0 or something else). no other echo statement must be there in the PHP page

Answer 2

You have to send data using Ajax to the PHP and get the answer back and show the popup message

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 : (U need jQuery library)

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 :

Use your PHP code and check whatever condition is true or false and echo it as "failed" or "success".

Answer 3

You should return the value of $LoginStatus from php instead of using redirection. Also, select didn't need a value attribute like <select value=""> is incorrect. Now check this answer

 function xhr(){ var un=document.getElementById('UserId').value; var pw=document.getElementById('UserPwd').value; var md=document.getElementById('ModuleCd').value; var smd=document.getElementById('SubModuleCd').value; //assume that x is the XHR object x = new XMLHttpRequest(); x.open("POST","login.php",true); x.setRequestHeader("Content-type","application/x-www-form-urlencoded"); var params="UserId="+un+"&UserPwd="+pw+"&ModuleCd="+md+"&SubModuleCd="+smd; x.send(params); x.onreadystatechange=function(){ if(x.readyState==4 && x.status==200){ console.log(x.responseText); checkLogin(x.responseText); } } } function checkLogin(x){ if(x != 1) alert("Login failed"); else window.location.href="logged.php"; } 

 <?php session_start(); $conn=odbc_connect("DSN", " ", " "); if (!$conn) { echo "Connection Failed : " . $conn; exit(0); } $stmt=odbc_exec($conn,"CALL UserLogin (".$_POST['UserId'].",'".$_POST['UserPwd']."','".$_POST['ModuleCd']."','".$_POST['SubModuleCd']."')"); if (!$stmt) { echo "Error : " . odbc_errormsg(); } if (odbc_fetch_row($stmt)) { $Username=odbc_result($stmt,"Username"); $LoginStatus=odbc_result($stmt,"LoginStatus"); } if($LoginStatus==1) { $_SESSION["Username"]=$Username; $_SESSION["LoginStatus"]=$LoginStatus; echo $LoginStatus; } /* else echo $Username=odbc_result($stmt,"Username"); echo $LoginStatus=odbc_result($stmt,"LoginStatus"); */ ?> 

 <form method="post" name="login"> <input type="text" name="UserId" id="UserId" value=""> <input type="password" name="UserPwd" id="UserPwd" value=""> <select name="ModuleCd" id="ModuleCd"> <option value="">Module</option> <option value="01">01</option> </select> <select name="SubModuleCd" id="SubModuleCd"> <option value="">SubModule</option> <option value="01">01</option> </select> <input type="button" onclick="xhr();" name="login" value="Login"> </form>