|
В моей предыдущей заметке я описал несколько простых плагинов AJAX.
Теперь я покажу, как использовать один из них — ajax_form —
в реальных приложениях. Я думаю, что это наиболее полезный плагин,
потому остановимся на нем более детально.
Большинство веб-форм имеют различные механизмы проверки.
Простейшим вариантом является обработка формы на сервере и разбор
результатов на клиенте, где результирующие данные имеют следующий
формат:
true;Пользователь успешно зарегистрирован;http://example.com/login/
false;Пожалуйста, введите Ваше имя;Введенные пароли не
совпадают
Результирующая строка может быть разрезана на клиенте, а
результаты отображены в соответствующей части страницы.
Обрабатывающая функция может выглядеть так (она является частью
примера smarty_ajax):
var SmartyAjax =
{
onSubmit: function(originalRequest)
{
var results = originalRequest.responseText.split(";");
if (results[0]
== "true")
{
SmartyAjax.Messages.set(results[1],
SmartyAjax.Messages.MT_WARNING)
} else
{
SmartyAjax.Messages.clear();
SmartyAjax.Messages.setType(SmartyAjax.Messages.MT_ERROR);
for (var
i = 1; i < results.length;
i++) {
SmartyAjax.Messages.add(results[i]);
}
}
}
}
Эта функция использует несколько методов объекта
SmartyAjax.Messages, который зависит от следующих HTML-элементов:
<div id="messages">
<p id="messages-title"></p>
<ul id="messages-list"></ul>
</div>
Для управления сообщениями я создал шаблон Smarty parts/warnings.tpl.
Вы можете использовать его из PHP-файла следующим образом:
// содержит ли сообщение предупреждение (или
ошибку)
$t-> assign('messages_warning',
true);
// массив сообщений
$t-> assign('messages',
array('Please
provide your account information'));
Еще необходимо рассмотреть сообщение, которое уведомляет
пользователя об обработке AJAX-запроса. В примере есть объект
SmartyAjax.Process, содержащий два метода: hide() и show(), которые
могут быть использованы для скрытия и отображения сообщения. Они
зависят от HTML-элемента с id=”ajax-process”. Важно добавить стиль
“position: absolute”, так как сообщение будет отображаться в правом
верхнем углу экрана независимо от положения полосы прокрутки.
ajax_form проста в использовании:
{ajax_form method="post"
id="form_register"}
Любой элемент формы может быть размещен здесь
{/ajax_form}
Возможные параметры:
- url - URL для AJAX-запроса (если не указан
URL, будет использован текущий)
- method - метод запроса (по умолчанию get,
может быть get или post)
- params - URL-закодированные параметры
- id - ID элемента формы
- callback - функция JavaScript, которая
будет выполнена по завершении запроса
Пример можно найти
здесь, исходный код доступен для загрузки
здесь
|
