В моей предыдущей заметке я описал несколько простых плагинов 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, которая будет выполнена по завершении запроса
Пример можно найти здесь, исходный код доступен для загрузки здесь
Мне кажется, что такие вещи существенно облегчат написание кода многим программистам. По этому было бы не плохо развивать и далее связку Smarty+AJAX. Так держать!
Есть вопросы:
И еще. Прости Критик, что пишу не по теме, но все же. “Мне кажется, что такие вещи существенно облегчат написание кода многим программистам.” – что за фраза? что-то от нее несет каким-то популизмом или чем-то в этом роде.
1. Response can be a simple text string or an XML document DOM (Document Object Model). The two request object response properties you will use for working with a response are responseText and responseXML. The DOM object stored in responseXML is a completely accessible DOM that can be manipulated and traversed in the same way that your HTML document can be. The responseText property is used when a simple text string is sent by the server.
2. About cross-domain AJAX you can look at following:
http://benlog.com/articles/2006/02/14/cross-domain-ajax
http://benlog.com/articles/2006/02/15/cross-domain-ajax-2
http://getahead.ltd.uk/ajax/cross-domain-xhr
Erka, это никакой не популизм, а мое личное мнение. Мне кажется, что с помощью такой технологии проще, например, проверить вводимые данные на стороне клиента, да и работает шустренько.
А на счет того, что “облегчат написание кода многим программистам”, так все мы знаем, что программисты ЛЕНИВЫ, а вот заюзать “под себя” то, что не поленился сделать другой программист за нас всегда приятно :). Тем более, что довольно-таки полезная вещь.
Можно ли как-то обойти проблему с кодировкой кирилицы без кодирования контента Ajax-сервером при его отдачы ? У меня в Опере все нормально, а IE выводит непонятніе символы
Можете сказать, какую кодировку Вы используете и какая версия PHP установлена на сервере?
Спасибо за ответ, Дмитрий!
Apache/1.3.31
PHP 4.2.2
Получаеться меняю тестовый Ваш шаблон about.tpl, добавляю туда рус. текст, при просмотре “About” с Вашего примера в Опере все нормально, а в ИЕ непонятные символы. Я думал iconv в Юникод перекодировать, но еще хуже :(
P.S: Может у меня что-то с ПХП?
Нет, с PHP у Вас все в порядке :-) Во-первых, вы нашли небольшой баг в моих примерах. В page.tpl в строке
{$lang.charset} следует заменить на Вашу кодировку, например так:
Теперь русский отображается нормально, но AJAX-запросы возвращают текст в неправильной кодировке (по умолчанию UTF-8). Все, что нужно, это указать правильную кодировку страницы в response. Это можно сделать так (index.php):
2
3
4
5
global $t;
header('Content-Type: text/html; charset=windows-1251');
$t->display('introduction/' . $_GET['page'] . '.tpl');
}
Я обновил примеры на сайте, теперь в about добавлена фраза на русском.
Дмитрий, спасибо большое!
Все получилось ;)
Всегда рад помочь :-)
Хорошие примеры. Будем использовать, и впоследствии расширять. Спасибо.
Меня заинтересовал вопрос об “responseText или responseXML”.
XML – хороший способ сохранить или передать структурированые данные, но есть еще одна альтернатива – JSON (Javascript Object Notation) http://www.json.org, советую посмотреть http://www.json.org/xml.html где сравниваются обе технологии.
JSON позволяет передавать переменные и даже целые обьекты из одного языка в другой, например:
PHP file
2
3
print $json->encode($fooArray); // Convert php to json
// Output: {"uname":"Sokol", "uemail":"xxx@xxx.com"}
HTML file
2
alert('User name: '+fooArray.uname+' Email: '+fooArray.uemail);
В отличии от XML здесь не нужно ничего парсить и к тому же данные в JSON формате занимают меньше места чем в XML.
Надеюсь мои комментарии окажутся полезными.
Большое спасибо за комментарий
Я уже давно присматриваюсь к этой технологии (в частности к ее реализации в Zend Framework – классу Zend_Json). Но все руки никак не дойдут хорошенько разобраться :-)
Пользуемся технологией типа ajax с dklab.ru она куда гибче и кроссплатформенее , легче в понимании…
всё прекрасно отрабатывается удаленно и в Opera и в MSIE и в FireFox, сам 2 минуты назад проверил
dklab действительно предложили интересный вариант использования технологии асинхронных запросов. Но я бы поспорил по поводу удобства использования, легкости понимания и особенно перспектив. Ведь до сих пор ни один браузер не имеет нормальной поддержки CSS, почему же многие стараются использовать эту технологию, а не таблицы? В общем это все флейм, в любом случае спасибо за ссылку.
Может это и флейм :) но…
Конечно AJAX поддерживают IBM, SUN и т.п. фирмы, что сразу за собой тянет развитие технологии… но честно говоря реализация dklab проще все же (может для меня и dklab : токо ), как говорят “всё гениальное просто”
по легкости…. ну не знаю, прочтя статью в конце я уже всему научился (потому что сам долгое время шел к этому (разрабатывал))… еще час потратил на js библиотечку и всё – у меня есть универсальный инструмент… простой и самое главное отлично работающий и самое главное кроссбраузерный!
И использовать надо то кому нравиться, можно использовать zend framework а можно писать свои классы, главное не зацикливать тогда прогресса не будет и т.п. Просто я смотрел много cms все сделаны почти одинаково, что огорчает, хотя есть масса путей реализации другой архитектуры к тому же более гибкой и простой…
т.е. всегда должна быть “конкуренция” и возможность выбора…
плохо то что у dklab нет хорошего маркетинга и рекламы..
на open source тяжело зарабатывать :\
Добрый день! Плагин просто супер! Спасибо!
Как можно пообщаться с Вами поподробнее!?
С уважением, Александр
Very very nice job, I like it ! ;)
Could you post an example using the callback function ? I’m trying to call a javascript function after the request is completed but it’s called before ! I want to call a javascript function when form is completed without error to change page location, is it possible ?
Regards.
Hello, David
You can look at chat sample in the article’s sources.
There is following construction in the template file chat.tpl:
Below this you can find JavaScript (unnecessary things are stripped out):
2
3
4
5
6
onMessageSent: function() {
Field.clear("message");
Field.focus("message");
}
}
In this sample function onMessageSent will be called when request will be completed.
Plugin ajax_form does supports callback param too.
Thanks, it works. I didn’t understand the callback function completely replaced your function “OnSubmit”.
Do you thinks it’s possible to use callback with ajax_update too ? ;) I tried to add that (in the ajax_update plugin, etc) but the callback function is not called when completed… Did you tried too ?
i look into ajax_update , onComplete: callback, i try to use callback too with ajax_update, but nothing triggerred after update complete, same question with David ..
[...] ・ajaxフォームの解説記事 Dmytro Shteflyuk’s Home » Blog Archive » AJAX-enabled Smarty plugins Part 2: ajax_form [...]
You know about XAJAX, it ‘ s a framework, who work with ajax applications
and have a link with Smarty, to answer the same prob;em, no?
Hi Alexander
I know XAJAX and used it a little, but I don’t know if it has Smarty bindings
Da, ya vchera prochetal ob etom, ya ne znakom s XAJAX, no sabirayus izuchat.
Menia interesuyet sviazivat Smarty s Ajax.
Nedavno scachal knigu Smarty PHP Template Programming and Applications.
Tam est tema ob kontrole obnavlenie shablona, dumaiu eto kak raz chto nada, php script.
Skazhite esli ya oshebayus.
Привет document.write(”)
for (i=0; i’+window.history.previous+”)
}
document.write(”) в IE выводит одни undefined
Не знаешь че можно предпринять
сорри document.write(”)
for (i=0; i’+window.history.previous+”)
}
document.write(”)
скрипт не выводиться , но проблему изложил вроде ответь плз
2Flaviy: По ходу съелись тэги
Попробуй использовать < вместо < и > вместо >
Имеется в виду комментарий :-)
Привет! Вопрос можно ли в инет эксплорере вывести журнал посещений с помощью 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 по сабмиту формы (с передачей параметров/значений элементов формы) ?