#php #javascript #html #ajax
#php #javascript #HTML #ajax
Вопрос:
Итак, я новичок в AJAX (не новичок в PHP), и я пытаюсь создать логин с помощью AJAX для запроса файла PHP. Итак, это код, который я пытаюсь использовать.
У меня есть три файла. Первый из них login_form.php . Он содержит форму входа в систему…
<html>
<head>
<title>Log In</title>
<script language="javascript" src="loginsender.js" />
</head>
<body>
<form method="post" name="loginfrm" onsubmit="formValidator()">
<p id="hint"></p>
<label for="username">Username:</label><input type="text" name="username" id="username" />
<label for="password">Password:</label><input type="password" name="password" id="password" />
<input type="submit" name="submit" value="Log In" />
</form>
</body>
</html>
Следующий loginsender.js . Это файл JavaScript / AJAX, который я использую для отправки в PHP-скрипт…
function formValidator()
{
if (document.loginfrm.username.value.length < 3 || loginfrm.password.value.length < 3)
{
msg = "Please enter a valid username/password."
document.getElementById("hint").innerHTML=msg;
}
else
{
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 amp;amp; xmlhttp.status == 200)
{
document.getElementById("hint").innerHTML = xmlhttp.responseText;
}
}
}
var params = "username=" document.loginfrm.username.value "amp;password=" document.loginfrm.password.value;
xmlhttp.open("post", "login.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
Последний login.php , который я использую для обработки фактического входа в систему…
<?php
session_start();
require_once("includes/mysql.inc.php");
require_once("includes/functions.inc.php");
$username = sanitize($_POST['username'], true);
$password = sanitize($_POST['password'], true);
$query = "SELECT * FROM users WHERE username = '$username'";
$result = mysql_query($query);
if (mysql_num_rows($result) != 1) // no such user exists
{
echo 'Sorry, no such user exists';
logout();
die();
}
$userData = mysql_fetch_assoc($result);
$hash = hash('sha256', $userData['salt'] . hash('sha256', $password));
if ($hash == $userData['password'] amp;amp; $username == $userData['username']) // successful log in
{
validateUser($userData['username']); // set session data
echo '<meta http-equiv="refresh" content="2; url=index.php" />';
}
else
{
echo 'Sorry, but you entered an incorrect username/password.';
logout();
die();
}
?>
В целом, цель состоит в том, чтобы пользователь вводил комбинацию имени пользователя и пароля в login_form.php и отправьте его, запустив loginsender.js (и метод FormValidator()). Затем будет выполнен запрос к скрипту входа в PHP, который проверит допустимую комбинацию user / pass, а затем настроит ее в сеансе (или нет, если не удалось войти в систему).). Проблема в том, что независимо от того, какую комбинацию я ввожу, ничего не происходит, страница обновляется при нажатии кнопки отправить, но это все.
** ОБНОВЛЕНИЕ 1: я отредактировал свою страницу login_form, для начала я просто вставил функцию FormValidator в скрипт, чтобы мне было легче просматривать, а не переключаться между документами.
Я также реализовал некоторые из сделанных предложений.
Вот оно:
<html>
<head>
<title>Log In</title>
<script type="text/javascript" language="javascript">
function formValidator()
{
if (document.loginfrm.username.value.length < 3 || loginfrm.password.value.length < 3)
{
msg = "Please enter a valid username/password."
document.getElementById("hint").innerHTML=msg;
}
else
{
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 amp;amp; xmlhttp.status == 200)
{
document.getElementById("hint").innerHTML = xmlhttp.responseText;
}
}
}
var params = "username=" document.loginfrm.username.value "amp;password=" document.loginfrm.password.value;
xmlhttp.open("post", "login.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
</head>
<body>
<p id="hint"></p>
<form method="post" name="loginfrm" onsubmit="formValidator(); return false;">
<label for="username">Username:</label><input type="text" name="username" id="username" />
<label for="password">Password:</label><input type="password" name="password" id="password" />
<input type="submit" name="submit" value="Log In" />
</form>
</body>
</html>
Комментарии:
1. Вы должны изменить свой login.php , вы не можете обновить meta с помощью ajax-запроса. Вы должны выполнить мета-обновление / перенаправление страницы после получения ответа ajax в блоке кода javascript.
Ответ №1:
Не похоже, что вы препятствуете выполнению действия «отправить» по умолчанию, которое, поскольку вы не определили a action для формы, заключается в том, чтобы просто отправить обратно на текущую страницу.
Измените строку html формы на:
<form method="post" name="loginfrm" onsubmit="formValidator(); return false;">
return false; Говорит ему НЕ делать то, что он собирался сделать для этого действия.
Комментарии:
1. Когда я меняю свой код на это, он просто перенаправляет обратно на страницу login_form без отображения обновленного сообщения об ошибке.
2. возможно, вы пропустили какой-либо » в приведенной выше строке
3. Нет, я опубликую свой обновленный код в качестве ответа на свой вопрос. Я просто назову это обновлением 1.
4. @Jacob, это может быть связано с тем, что ваш метод или какой-либо другой JS выдает ошибку. Откройте Firebug, вы что-нибудь видите? (Также поставьте консоль. войдите в начало своего метода, просто чтобы убедиться , что он вводится)
Ответ №2:
Если вы не хотите, чтобы Form-submit-action обновлял страницу, верните false из вашего скрипта onsubmit. В противном случае браузер будет делать именно то, что вы ему скажете в <form> : HTTP POST .
Ответ №3:
Я думаю, что функция onSubmit() выполнена, а также форма действительно отправлена! Таким образом, вы получаете пустую страницу, которая является результатом php-скрипта.
Не делайте это html-формой, и она должна работать нормально.
Ответ №4:
Вам нужно написать это, чтобы предотвратить обновление формы..
<form method="post" name="loginfrm" onsubmit="formValidator(); return false;">
в остальном с вашим кодом все в порядке..
Ответ №5:
попробуйте это
<input type="submit" name="submit" value="Log In" onclick="formValidator(); return false;"/>