以ajax登錄表格修復錯誤

Question

我正在嘗試爲網頁創建登錄表單。我試圖通過ajax請求驗證用戶的登錄信息發送到服務器。如果驗證成功，我想將用戶重定向到新頁面。否則，我想在登錄表單上顯示一個錯誤。我遇到兩個問題：在提交表單並刷新服務器的錯誤後頁面刷新。

這裏是我已經設置了形式：

<div id="errorMsg" action="login.php" class="error" style="width: 120px;"></div><br /> 

<form id="form" name="loginform" method="POST" style="width: 120px;"> 
    <label for="username">Username</label> 
    <input id="username" name="username" type="text" style="width: 120px;"><br /> 

    <label for="password">Password</label> 
    <input id="password" name="password" type="password" style="width: 120px;"><br /> 

    <label for="remember">Remember</label> 
    <input id="remember" type="checkbox" name="remember"> 

    <input value="Login" name="login" type="submit" onClick="return checkStr();"> 
</form> 

這裏是javascript代碼我有一個創建請求（因爲它是有點長我不包括SHA256法）：

var xmlHttp 

function checkStr() 
{ 
var form = document.getElementById('form'); 
xmlHttp=GetXmlHttpObject(); 
if (xmlHttp==null) 
{ 
    alert("Your browser does not support AJAX!"); 
    return; 
} 

if(form.username.value=="" && form.password.value=="") 
{ 
    document.getElementById("errorMsg").innerHTML="Username and Password are required."; 
    return false; 
} 
else if(form.username.value=="") 
{ 
    document.getElementById("errorMsg").innerHTML="Username is required."; 
    return false; 
} 
else if(form.password.value=="") 
{ 
    document.getElementById("errorMsg").innerHTML="Password is required."; 
    return false; 
} 

var username = encodeURIComponent(form.username.value); 
var password = encodeURIComponent(sha256(form.password.value)); 

var parameters = "username="+username+"&password="+password; 

xmlHttp.onreadystatechange=stageChanged2; 
xmlHttp.open("POST","login.php",true); 
xmlHtpp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xmlHttp.send(parameters); 
} 

function stateChanged2() 
{ 
if (xmlHttp.readyState==4) 
{ 
response=xmlHttp.responseText; 
if(response=='Success!') 
{ 
window.location.href='main.php'; 
} 
else 
{ 
document.getElementById("errorMsg").innerHTML=xmlHttp.responseText; 
} 
} 
} 


function GetXmlHttpObject() 
{ 
var xmlHttp=null; 
try 
    { 
    // Firefox, Opera 8.0+, Safari 
    xmlHttp=new XMLHttpRequest(); 
    } 
catch (e) 
    { 
    // Internet Explorer 
    try 
    { 
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch (e) 
    { 
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    } 
return xmlHttp; 
} 

最後，這裏是我使用的服務器上處理登錄代碼：

if($username = $_POST['username'] && $password = $_POST['password']) 
    { 
    if($database->check_password($username, $password) == FALSE) 
    { 
     echo 'Username/Password was incorrect. You may recover your password and username <a href="' . $_SERVER['HTTP_HOST'] . '/recovery.php">here</a>.'; 
     exit(); 
    } 

    elseif($database->is_banned($username)) 
    { 
     echo 'This account has been banned. If you are unsure as to why, you may inquire by sending an email to admin@torb.com, making sure to include the username.'; 
     exit(); 
    } 

    elseif($database->is_banned($session->get_ip_address())) 
    { 
     echo 'This IP Address has been banned. If you are unsure as to why, you may inquire by sending an email to admin@torb.com, making sure to include the IP Address.'; 
     exit(); 
    } 

    elseif($database->torb->user_approval_denied($username)) 
    { 
     echo 'Your account was not approved. We will contact you if our decision changes.'; 
     exit(); 
    } 

    elseif(! $database->user_is_approved($username)) 
    { 
     echo 'Your account has not been approved yet. We will let you know when it has been activated.'; 
     exit(); 
    } 

    //Code to log user in 

    echo "Success!"; 
    exit(); 
} 

如何修復我的代碼，以便a）顯示來自服務器的錯誤，以及B）不重新加載頁面，除非登錄成功，在這種情況下，它會重定向到主頁面？

感謝您閱讀所有這些內容。

Answer 1

幾件事情：

1. 在行xmlHttp.onreadystatechange=stageChanged2;，stateChanged2拼錯作爲stageChanged2。
2. 在行xmlHtpp.setRequestHeader(...),xmlHttp拼寫爲xmlHtpp。
3. 爲了防止表單提交，您需要在<form>標記的onsubmit事件屬性中返回false，而不是在提交按鈕的onclick事件屬性中。
4. 與＃3一起，您的checkStr()函數在進行AJAX調用後不返回false。添加return false;作爲該函數的最後一行。

作爲一個不相關的說明，我注意到你的action="login.php"錯誤地在div標籤而不是form標籤上，除非由於某種原因這是故意的。

---

您是否在使用任何類型的調試工具？這裏的兩個問題來自拼寫錯誤。例如，在Firefox中，錯誤控制檯馬上向我顯示了這些信息。

---

對於AJAX，您可能需要考慮JavaScript庫（如jQuery）。它解決了瀏覽器的差異，並簡化了整個過程。現在，我很少看到像您一樣手動編碼AJAX請求。