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

有几件事：

在xmlHttp.onreadystatechange=stageChanged2;行中，stateChanged2拼写错误为stageChanged2。
在xmlHtpp.setRequestHeader(...)行中，xmlHttp拼写错误为xmlHtpp。
为了防止表单提交，您需要在false代码的<form>事件属性中返回onsubmit，而不是在提交按钮的onclick事件属性中。< / LI>
结合＃3，您的checkStr()函数在进行AJAX调用后不会返回false。添加return false;作为该函数的最后一行。

作为一个不相关的注释，我注意到你的action="login.php"错误地在div标签而不是表单标签上，除非出于某种原因这是故意的。

您使用的是哪种调试工具？这里的两个问题来自拼写错误。例如，在Firefox中，错误控制台立即向我展示了这些内容。

对于AJAX，您可能需要考虑一个JavaScript库，例如jQuery。它解决了浏览器的差异并简化了整个过程。这些天我很少看到像你一样手动编码的AJAX请求。

修复ajax登录表单中的错误

1 个答案: