Исправление ошибок в форме входа в 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();
}

Как я могу исправить свой код так, чтобы он а) отображал ошибки с сервера и б) не перезагружал страницу, если вход не был успешным, в этом случаеон перенаправляет на главную страницу?

Спасибо, что прочитали все это.

Answer 1

Несколько вещей:

1. В строке xmlHttp.onreadystatechange=stageChanged2;, stateChanged2 написано с ошибкой как stageChanged2.
2. В строке xmlHtpp.setRequestHeader(...), xmlHttp написано с ошибкой как xmlHtpp.
3. Чтобы запретить отправку формы, необходимо вернуть false в onsubmit атрибуте события <form> тега, а не в onclick атрибуте события кнопки отправки.
4. В сочетании с # 3 ваша функция checkStr() не возвращает false после выполнения вызова AJAX. Добавьте return false; в качестве последней строки этой функции.

Как несвязанное примечание, я заметил, что ваш action="login.php" ошибочно указан в теге div вместо тега form, если только по какой-то причине это не является преднамеренным.

---

Используете ли вы какой-либо инструмент отладки? Две проблемы здесь от орфографических ошибок. Например, в Firefox консоль ошибок показала мне это сразу.

---

Для AJAX вы можете рассмотреть библиотеку JavaScript, такую ​​как jQuery. Он учитывает различия в браузерах и упрощает весь процесс. В настоящее время я редко вижу запросы AJAX, закодированные вручную, как у вас.