页面内的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.