В этом уроке я расскажу, как можно сделать процедуру входа в систему пользователей более удобной используя AJAX. Удобство состоит в том, что пользователю не нужно ждать перезагрузки страницы при отправке формы. Плюс, добавим некоторые “бубенчики” и “свистульки” используя эффекты jQuery.

Итак, начнем.

Шаг 1: HTML

Как водится начинаем с разметки HTML - создаем простую форму с двумя полями для логина и пароля:

<a href="login_form.php" id="login_link">Логин</a><br/>
<div id="overlay"></div>
<div id="login_box">
	<a href="#" id="close_btn">Закрыть</a>
	<div id="login_result"></div>
	<form method="post" action="login.php" id="login_form">
		<label for="username">Логин:</label>
		<input name="username" type="text" id="username" value="" maxlength="20" /><br/>
		<label for="password">Пароль:</label>
		<input name="password" type="password" id="password" value="" maxlength="20" /><br/>
		<input name="Submit" type="submit" id="submit" value="Login" />
	</form>
</div>

Все, что вы увидите на странице, это только ссылка “Логин”. Форма (login_box) и оверлей (overlay) будут появляться только после нажатия на эту ссылку. В том случае, если JavaScript в браузере выключен, пользователь будет просто перенаправлен на страницу login_form.php где будет размещена соответствующая форма.

Шаг 2: CSS

#login_form {
	margin:16px;
}
#login_box {
	position:absolute;
	height:200px;
	width:400px;
	margin:-100px 0px 0px -200px;
	top: 50%;
	left: 50%;
	text-align: left;
	padding: 0px;
	background-color: #f5f5f5;
	border: 1px dotted #000000;
	overflow: auto;
	display:none;
}
#overlay{
	position:absolute;
	display:none;
	background:#000;
	opacity:.8;
	filter:alpha(opacity=80);
	left:0;
	top:0;
}
label {
	display:block;
	width:140px;
	padding:0 6px;
	float:left;
	text-align:right;
}
input {
	float:left;
}
form br {
	clear:both;
}
#submit {
	margin-left: 150px;
}
#close_btn {
	display:block;
	height:26px;
	text-align:right;
}
#login_result {
	display:block;
	margin:10px;
	text-align: left;
	text-indent: 5px;
	height:22px;
	line-height:22px;
}
.error {
	background:#f9caca;
	border: 1px solid #f00;
}
.success {
	background:#caf9ca;
	border: 1px solid #0f0;
}
.process {
	background:#cacaf9;
	border: 1px solid #00f;
}

Сообщения о результатах логина будут отображаться в div-е с id=login_result, которому будут присваиваться классы process (в процессе обработки запроса), error (ошибка) и success (пользователь успешно залогинился), вид которых отличаются между собой только цветом. Обратите внимание на центрирование контейнера с формой - значения top и left установлены в значение 50%, а левый и правый margin равны половине ширины и высоты контейнера со знаком минус. Таким образом мы добиваемся центрирования контейнера в середине экрана.

Шаг 3: JavaScript.

Подключаем библиотеку jQuery:

<script src="jquery.js" type="text/javascript"></script>

Теперь пишем код, который будет выполнять AJAX запрос и показывать анимированные сообщения о результатах:

$(document).ready(function(){
	// 1 - по нажатию на ссылку #login_link будет появляться форма логина
	$("#login_link").click(function(e){
		var overlay = $("#overlay");
		var w = $(window).width();
		var h = $(window).height();
		overlay.css('width', w);
		overlay.css('height', h);
		overlay.css('display','block');

		$("#login_result").html('').removeClass();
		$("#login_box").css('display','block');

		e.preventDefault();
	});

	// 2 - по нажатию на ссылку #close_btn форма логина будет закрываться
	$("#close_btn").click(function(e){
		$("#overlay").css('display','none');
		$("#login_box").css('display','none');
	});

	// 3 - обработка отправки формы
	$("#login_form").submit(function() {
	        // указываем класс process для div-а сообщений и плавно показываем его
	        $("#login_result").removeClass().addClass('process').text('Проверка....').fadeIn(1000);
	        // проверяем через AJAX имя пользователя пароль
	        $.post($("#login_form").attr('action'), { username:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data) {
				if(data==1) {
					// логин верный
					$("#login_result").fadeTo(200,0.1,function() {
					$(this).html('Редирект.....').removeClass().addClass('success').fadeTo(900,1,
						function() {
							document.location='secure.php';
						});
					});
				} else {
					// логин неверный
					$("#login_result").fadeTo(200,0.1,function(){
						$(this).html('Логин неверен ...').removeClass().addClass('error').fadeTo(900,1);
					});
				}
			});
			return false;// отмена отправки формы (действие по умолчанию)
	});
});

Этот код разбит на три части. В первой мы добавляем обработчик события onclick для ссылки “Логин” (id=login_link), в котором определяются размеры страницы, для того, чтобы присвоить их оверлею, затем устанавливается значение display:block для формы и оверлея. Размеры окна определяем при помощи функций width() и height():

var w = $(window).width();
var h = $(window).height();

В конце обязательно нужно предотвратить действие по умолчанию для ссылки при помощи функции preventDefault().

Во второй части добавляем обработчик для ссылки “Закрыть”, чтобы дать возможность пользователю закрыть форму логина, если он забыл пароль и отчаялся его угадывать. Здесь просто устанавливаем значения display:none для оверлея и формы логина:

		$("#overlay").css('display','none');
		$("#login_box").css('display','none');

Функцию preventDefault() здесь можно не использовать, поскольку ссылка никуда не ведет (href для нее равен “#”).

Ну и наконец третья часть - отправка запроса на сервер. Здесь мы добавляем обработчик к событию onsubmit формы login_form. В первой строке функции обработчика устанавливаем класс process для контейнера login_result чтобы дать понять пользователю, что запрос отправлен. Затем собственно отправляется запрос при помощи функции post(). Куда этот запрос отправлять мы определяем по атрибуту action формы ( $(”#login_form”).attr(’action’) ). Далее указываем параметры запроса:

{ username:$('#username').val(),password:$('#password').val(),rand:Math.random() }

Первые два поля - username (имя пользователя) и password (пароль), берем из соответствующих полей формы, а последний параметр - rand служит для избежания возможных проблем с кэшированием.

Скрипт, который проверяет, правильно ли введены данные для входа в систему (в нашем примере это login.php), возвращает 1 в случае успеха и 0 в случае ошибки. Проверяем эти значения в структуре if … else и показываем соответствующие сообщения используя fadeTo() для придания эффекта плавного появления.

После успешного входа в систему, направляем пользователя на его домашнюю страницу, которую мы собственно и закрывали паролем:

document.location='secure.php';

смотреть демоскачать пример

Запись добавлена 29 апреля 2008 в категории AJAX, jQuery.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.