8 Июнь 2011

Kohana и Ajax. Часть 19

Kohana и Ajax

Приветствую вас, уважаемый читатель.

В данной публикации я предлагаю разобраться с вопросом прикручивания Ajax к Kohana средствами jQuery (при желании вы можете освежить в памяти теоретические основы реализации Ajax-запросов посредством jQuery).

Для пущего интереса поставим себе конкретную задачу и постараемся ее реализовать: при восстановлении пароля пользователя (kohana/auth/hochuvspomnit) Ajax-запросом выполнять проверку введенного адреса эл. почты.

Видеоурок:

Скачать видеоурок (*.wmv, 34.3 МБ).

Скачать исходники (*.zip, 1.15 МБ).

Техническое задание на Ajax-модуль для воостановления пароля на Kohana:

  • Пользователь переходит на страницу восстановления пароля (kohana/auth/hochuvspomnit), где вводит адрес эл. почты.
  • Ajax-запросом выполняется проверка наличия введенного адреса эл. почты в таблице users.
  • Если адрес эл. почты найден — вывести изображение зеленой галочки рядом с полем ввода e-mail.
  • Если адрес эл. почты не найден — вывести красный крестик, символизирующий ошибку.

Первое, что нам потребуется — это контроллер с PHP-скриптом, выполняющим проверку наличия в таблице users введенного адреса эл. почты. Создадим новый контроллер в папке kohana\www\application\classes\controller\ с именем ajax.php.

Листинг 1: PHP-скрипт контроллера ajax.php

<?php defined('SYSPATH') or die('No direct script access.');

class Controller_Ajax extends Controller {

	public function action_emailunique()
	{
		$email = Arr::get($_POST, 'email', '');
		
		$myuser = new Model_Myuser();
		$res = $myuser->username_unique($email);
		
		echo json_encode(array('result' => $res));
	}
}

Пояснение к Листингу 1:

3-я строка — поскольку контроллер Ajax не выполняет вывода информации в шаблон, то нет смысла наследовать его от привычного нам Controller_Template. Правильным будет унаследовать Ajax от обычного родительского контроллера Controller.

7-я строка — получаем из глобального массива POST значение поля email, которое будет содержать отправленный на проверку адрес эл. почты.

9-я строка — используем старую знакомую модель Myuser, обладающую методом проверки уникальности адреса эл. почты и ощущаем всю крутость ООП.

10-я строка — задействуем метод проверки уникальности адреса эл. почты username_unique. Если переданный на проверку e-mail в таблице users не найден, то метод username_unique вернет значение TRUE и оно будет записано в переменную $res. Если адрес эл. почты обнаружен в базе данных, то в $res будет записано FALSE.

12-я строка — данные выводятся в формате json.

Следующий шаг — необходимо подключить библиотеку jQuery к нашему проекту. Для этого открываем на редактирование файл главного шаблона basic.php (kohana1\www\application\views\basic.php) и в раздел HEAD добавляем:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Теперь в нашем проекте можно использовать всю мощь библиотеки jQuery.

Последний шаг — редактирование файла шаблона отображения формы восстановления пароля (kohana1\www\application\views\rempassview.php).

Необходимо добавить две картинки рядом с полем ввода e-mail (в соответствии с озвученным в начале статьи ТЗ): зеленую галочку и красный крестик. Оба изображения будут не видны по умолчанию. После получения ответа от PHP-скрипта одно из изображений будет показано пользователю, согласно полученным от скрипта данным. Прятать и снова показывать блоки можно благодаря манипуляциям с CSS-свойством display переключая его значение с none на inline и обратно.

Листинг 2: Модификация шаблона отображения формы восстановления пароля

<td>Эл. почта:</td>
<td><input type="text" name="email" id="email"></td>
<td>
	<span id="trueimg" style="display:none"><img src="/img/true.png"></span>
	<span id="falseimg" style="display:none"><img src="/img/false.png"></span>
</td>

Пояснение к Листингу 2:

Рядом с полем ввода адреса эл. почты добавлены два блока <span> с картинками, имеющие по умолчанию значение CSS style="display:none" (т. е. блоки не видны).

Теперь настало время написать jQuer-код Ajax-запроса.

Листинг 3: реализация Ajax-запроса методами jQuery на фреймворке Kohana 3.1

<script type="text/javascript">
	function runajax()
	{
		var email = $("#email").val();
		
		$.ajax({
		  type: "POST",
		  data: "email=" + email,
		  url: "/ajax/emailunique",
		  dataType: "json",
		  success: function(data)
		  {
			if(!data.result)
			{
				$("#trueimg").css('display','inline');
				$("#falseimg").css('display','none');
			}
			else
			{
				$("#falseimg").css('display','inline');
				$("#trueimg").css('display','none');
			}
		  }
		})
	}
	
	$(document).ready(function(){
		$("#email").blur(runajax);
	});
</script>

Код полностью аналогичен реализации отправки данных PHP-скрипту, рассмотренной в статье по основам Ajax.

Функция runajax запускается при потере фокуса ввода полем эл. почты.

С уважением, Андрей Морковин.

<< Предыдущая публикация курса Следующая публикация курса >>