В моей предыдущей заметке я описал несколько простых плагинов AJAX. Теперь я покажу, как использовать один из них — ajax_form — в реальных приложениях. Я думаю, что это наиболее полезный плагин, потому остановимся на нем более детально.
Большинство веб-форм имеют различные механизмы проверки. Простейшим вариантом является обработка формы на сервере и разбор результатов на клиенте, где результирующие данные имеют следующий формат:
1 2 | true;Пользователь успешно зарегистрирован;http://example.com/login/ false;Пожалуйста, введите Ваше имя;Введенные пароли не совпадают |
Результирующая строка может быть разрезана на клиенте, а результаты отображены в соответствующей части страницы. Обрабатывающая функция может выглядеть так (она является частью примера smarty_ajax):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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-элементов:
1 2 3 4 | <div id="messages"> <p id="messages-title"></p> <ul id="messages-list"></ul> </div> |
Для управления сообщениями я создал шаблон Smarty parts/warnings.tpl. Вы можете использовать его из PHP-файла следующим образом:
1 2 3 4 | // содержит ли сообщение предупреждение (или ошибку) $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 проста в использовании:
1 2 3 | {ajax_form method="post" id="form_register"} Любой элемент формы может быть размещен здесь {/ajax_form} |
Возможные параметры:
- url – URL для AJAX-запроса (если не указан URL, будет использован текущий)
- method – метод запроса (по умолчанию get, может быть get или post)
- params – URL-закодированные параметры
- id – ID элемента формы
- callback – функция JavaScript, которая будет выполнена по завершении запроса
Пример можно найти здесь, исходный код доступен для загрузки здесь
Привет! Вопрос можно ли в инет эксплорере вывести журнал посещений с помощью JavaScript. типа window.history.previous. по форумам нашел только для нетскейпа.
[...] http://kpumuk.info/ajax/ajax-enabled-smarty-plugins-part-2-ajax_form/ [...]
Попробовал. Ничего не получается. Запрос вроде посылается, но до PHP точно не доходит….
Всё конечно интересно, но как заставить чат отображать записи по русски?
Буду очень благодарен за совет.
Отличная вещь. Можно такой вопрос:
onComplete: callback -> возможно ли в функцию callback (напомню, что callback – функция JavaScript, которая будет выполнена по завершении запроса) передать объект originalRequest и уже в callback устроить “разбор полетов” с этим объектом? Заранее признателен за помощь.
Спасибо. Ступил. В сигнатуре самой функции callback нужно написать просто
callback (originalRequest)
{
… код…
responseXml = originalRequest.responseXML;
… код …
}
, а не callback(SmartyAjax.originalRequest)
{
… код …
}
Спасибо за отличный плагин.
Делаю сайт с использованием вашего плагина (добавил пару ф-ций, обновил Prototype до 1.5.0) и Rico 1.1.2 (http://openrico.org/rico/). Как только добавляю rico.js к страницам, ajax_form перестает работать. Processing… появляется, а запрос не идет.
Буду признателен за помощь.
Интересно, а данные из тега отправляются? Мне лично не получается передать файл на сервер.
Сорри, добавление к комментарию выше. Я имел в виду тег:
I like this initiative, much easier than xajax.
I tried it, but ran into a problem:
When using a pulldown, the value does not get posted back.
e.g.: [...options...]
{literal}
var getmaand = {
params: function() {
return {
showmonth: $F(“showmonth”)
}
}
}
{/literal}
Checking my php with print_r($_GET) and print_r($_POST) the month does not return.
Please advise.
Сорри, никогда не работал с Rico :-(
Linin, файлы невозможно загрузить, используя технологию AJAX. Для этого можно воспользоваться отправкой формы в скрытый iframe, более подробно описано здесь.
Is there any way to incorporate $_FILE for file upload support?
Hello Dmytro,
I’m trying to use ajax_form with the callback to change to nextpage.php if the form is OK.
The callback is called, but allways, also if the form is NOT good.
I did not understand the solution you gave to David, since that is from the chat example.
Can you help ?
I have:
2
3
4
5
6
7
8
{
document.form_register.action = "nextpage.php";
document.form_register.submit();
return false; // Is this required??
}
var finishcallback = finishfunc;
and
2
3
...
{/ajax_form}
Thanks, Alexander
а можно прикрутить к mootools smarty ?
Очень бы пригодилось,если бы объяснили как сделать автоматический запрос данных при смене опций в теге … а как продолжение как составить цепочку зависимых
я имел ввиду тег select
Кто-нить может объяснить нормально, как в любой цивилизованной документации к любому плагину (например, к тому же Smarty), как использовать эти плагины?
Если полностью скачать архив и запустить – работает… Но как только начинаешь приспосабливать к своему проекту, ничего не пашет. Вообще ничего!
1. Какие файлы из Smarty нужно заменить?
2. В какие каталоги какие файлы нужно добавить?
3. Где и какие пути должны быть прописаны?
4. Где можно скачать каждый из, с позволения сказать – плагин, по отдельности?
5. Как вообще его устанавливать?
И много других вопросов. Такое ошущение, что те, кто тут обсуждают это дополнение месяц сидели, это всё писаль, а тут просто продолжают обсуждать… А где начало?
Понятно, что тут мне никто ничего не должен, но тем не менее… Возможно плагин и хорош, во всяко случае необходим однозначно, но как он приподносится – ужас!!!
как нужно обрабатывать параметры params
шаблон
php-файл
2
3
4
{$opt = 'view';}
else
{$opt = $_REQUEST['opt'];}
у меня не передается параметр в php файл
пробывал и $_REQUEST, $_POST, $_GET
У меня проблема с русским запрос передает нормально! но в php файле если в форме были русские символы даже с заголовком 1251 выдает битую кодировку
Как можно совместить ajax_form и ajax_update ?
Задача – после сабмита формы, если есь ошибки заполнения с помощью ajax_update вписываем описания ошибок над элементами формы.
Если ошибок нет, на месте формы пишем “Success”
Схожи по смыслу вопрос:
Как заставить работать ajax_update по сабмиту формы (с передачей параметров/значений элементов формы) ?