Как сделать, чтобы она не перенаправляла на другую страницу, а появлялось окно, в которое нужно вводить данные, и чтобы после авторизации появлялся логин человека. Или напишите, где об этом почитать. Большое спасибо!
3 ответа
Делаем средствами css div который будет у нас играть роль окна. CSS прелести описывать не буду т.к. и так довльно таки обьемный код получится, я не фанат jquery поэтому его вы в моем коде не увидете.
<span id="loginShow">Войти</span>
<div id="login">
<imput type="text" id="username">
<input type="password" id="password">
<button id="authAction">Войти</button>
<div id="loginResult">
<!-- Тут мы будем отображать ответ сервера -->
</div>
</div>
ну вот "окошко" както так... терь PHP, как вы будете описывать обработку попытки входа дело ваше. Ну например:
if($_SERVER['REQUEST_METHOD'] == 'POST') {
if(!empty($_POST['username']) && !empty($_POST['password'])) {
// тут мы както будем проверять в бд...
// допустим у нас в теле условия формируется переменная
// в которой лежит 'OK' либо сообщение об ошибке
if($authResult == 'OK') {
// тут мы непосредственно делаем авторизацию пользователя
}
echo $authResult; // Выводим результат
}
}
ну и теперь мы дошли до JS:
var authRequest = new XMLHtppRequest();
function showLoginBox() {
document.getElementById("login").style.display = "block";
}
onload = function () {
document.getElementById('login').style.display = 'none'; //прячем формочку
document.getElementById('loginShow').onclick = showLoginBox; //при нажатии на спан - показываем формочку
// Для удобства запишу в обьект authRequest некоторые елементы
authRequest.username = document.getElementById('username');
authRequest.password = document.getElementById('password');
authRequert.result = document.getElementById('loginResult');
}
authRequest.loginTry = function () {
if(this.username.value != '') {
if(this.password.value != '') {
this.data = "username="+this.username.value+"password="+this.password.value;
this.doLogin();
}
else {
this.result.innerHTML = 'Вы не ввели пароль'
}
}
else {
this.result.innerHTML = 'Вы не ввели логин';
return;
}
authRequest.doLogin = function() {
this.open("POST", "http://путь_к_твоему_php_скрипту.php", true);
this.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //говорим серверу что мы отправляем POST формочку
this.send(this.data); // собственно отправляем
}
authRequest.onreadystatechange = function () {
//тут мы отлавливаем когда пришел ответ сервера на нашу отправку формочки
if(this.readyState == 4 && this.status == 200) {
result = this.responseText; //в this.responseText хранится ответ сервера
if(result == 'OK') { //если все ок и пользователь зареган
this.result.innerHTML = 'Вы успешно авторизованы';
document.getElementById("login").style.display = "none";
}
else {
this.result.innerHTML = result;
}
}
}
ну думаю тут понятно что при успешной авторизации уже можно средствами JS как-то перерисовать.
можно даже сделать еще один ajax запрос на другой скрипт, это уже не суть, если я вас правильно понял - алгоритм примерно такой
Код не тестил, накидал прямо на сайте так что если где ошибки - уж извините :)
По клику показываете окошко формы(скрытый блок), в этом окне по клику на отправку формы делаете аякс-запрос на страницу авторизации и передаёте форму, авторизовываете и возвращаете ответ: прошла авторизация успешно или нет. Если успешно - перезагружаете страницу либо меняете контент, это уже по необходимости и желанию. Если не успешно - показываете ошибку.
точно вопроса не понял, но могу подсказать все, что понял: Вот тебе примерный код(все, что пришло в голову перед сном):
<?php
session_start();
//тут какой нибудь код
if(isset($_GET['do']))
{
if($_GET['do']=="exit")
session_destroy();
}
if(isset($_POST['btn']))
{
if($_POST['btn']=="Авторизироваться")
{
//Процесс Авторизации
//Если все в порядке
//вводите данные в сессию
$_SESSION['auth']=true;
$_SESSION['name']='Имя';
}
}
if($_SESSION['auth'])
{
if($_SESSION['auth'])
{
echo 'Вы авторизованны как - '.$_SESSION['name'].'<br /><a href="?do=exit">Выход</a>';
}
else
{
//Тут форма для авторизации
echo '
<form method="post">
<input type="text" name="login"><br />
<input type="password" name="pass"><br />
<input type="submit" value="Авторизироваться" name="btn">
</form>
';
}
}
?>