頁面內的AJAX加載頁面

Question

我有一個驗證登錄腳本的AJAX腳本，當用戶輸入了錯誤的數據時，出現錯誤消息，但是當用戶輸入正確的數據時，新頁面加載錯誤消息空間。我知道問題出在哪裏，我只是不知道如何解決問題。

下面是登錄腳本和checklogin腳本

的login.php

<table class="loginTable" align="center"> 
    <tr> 
     <td> 
      Email: 
     </td> 
     <td> 
      <input type="text" name="email" id="email"/> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Password: 
     </td> 
     <td> 
      <input type="password" name="password" id="password"/> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" colspan="2"> 
      <span id="ErrorMessage"></span> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2" align="center"> 
      <!--Keep me logged in? <input type="checkbox" name="keeploggedin" /><br /><br />--> 
      <input id="loginButton" type="button" name="login" value="Login" onclick="processLogin()"/> 
     </td> 
    </tr> 
</table> 


<script> 

    function processLogin() 
{ 
var xmlhttp; 

var email = document.getElementById("email").value; 
var password = document.getElementById("password").value; 

if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("ErrorMessage").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("POST","checklogin.php",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("email=" + email + "&password=" + password); 
} 

</script> 

checklogin.php

<?php 

session_start(); 

//Login Script 



//Variables 
$email = $_REQUEST['email']; 
$userPassword = $_REQUEST['password']; 
//$keeploggedin = $_REQUEST['keeploggedin']; 



require_once("dbdetails.php"); 

// Create Mysqli object 
$db = new mysqli($hostname, $username, $password, $database); 

// Create statement object 
$stmt = $db->stmt_init(); 

// Create a prepared statement 
if($result = $stmt->prepare("SELECT u.UserFirstName, u.UserSurname, u.UserID FROM user u WHERE u.UserEmail = ? AND u.UserPassword = ?")) { 

    // Bind your variables to replace the ?s 
    $stmt->bind_param('ss', $email, $userPassword) or die(errorCodes($stmt->errno)); 

    //$row -> fetch_array(MYSQLI_ASSOC); 

    // Execute query 
    $stmt->execute() or die(errorCodes($stmt->errno)); 

    $stmt->bind_result($fname, $sname, $userID); 

    $stmt->store_result(); 

    $count = $stmt->num_rows; 

    if($count == 1){ 
     while($row = $stmt->fetch()) { 

      // Register $email, $password, $firstname, $surname, create logged_in session and redirect to file "projects.php" 
      $_SESSION['email'] = $email; 
      $_SESSION['password'] = $userPassword; 
      $_SESSION['firstname'] = $fname; 
      $_SESSION['surname'] = $sname; 
      $_SESSION['userID'] = $userID; 
      $_SESSION['LoggedIn'] = 'true'; 
      $_SESSION['loginCount'] = 0; 
      header("location:projects.php"); 
     } 
    } 
    else { 
     //$_SESSION['loginCount'] += 1; 
     //header("location:loginPage.php"); 
     //echo("<script type='text/javascript'>\n"); 
     //echo("changeError();\n"); 
     //echo("</script>");  

     echo("Username and Password mismatch, please try again"); 
    } 

    // Close statement object 
    $stmt->close(); 
} 


    function errorCodes($aErrorCode) { 
     echo("Error " . $aErrorCode . " has occured"); 
    } 


?> 

Answer 1

您可以測試xmlhttp.responseText：

if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     if(xmlhttp.responseText != "") //If not, it completes your error box 
      document.getElementById("ErrorMessage").innerHTML=xmlhttp.responseText; 
     //Else, let the redirection trigger 

    } 

Answer 2

登錄成功後返回一些JSON數據說登錄成功（來自php），然後修改你的這段代碼

xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("ErrorMessage").innerHTML=xmlhttp.responseText; 
    } 
    } 

要將用戶重定向到下一頁，如果您得到success作爲php響應。

Answer 3

與簡單的Ajax，希望它有助於:)

<script> 
function processlogin() 
{ 
$.ajax(
{ 
url:'checklogin.php', 
type:'POST', 
data:{'email':email,'password':password}, 
success:function(xyz) 
{ 
if(xyz==1) 
{ 
$("#errormessage").load("ajax/newcontent.php"); 
} 
else{ 
//do something as you need 
} 
} 
}); 
} 
</script> 

in the checklogin.php page, if the IF condition success then 'echo 1' or 'echo 0' in else part.so that you can validate using these values in success block of the ajax script.