В наши непростые времена уже как-то стыдно отправлять форму и получать результат на новой странице. Нижеизложенный скрипт с использованием jQuery позволяет любую форму превратить в ajax-форму.
function ajaxify(){ $('.ajaxify').each(function(){ $(this).on('submit','form',{parent:this},function(e){ e.preventDefault(); $.post( $(this).attr('action'), $(this).serialize(), function(data){ $(e.data.parent).html(data); } ); }); }); }
Сама форма:
<div class="ajaxify"> <form action="/form-target-url" method="post"> <input type="text" name="username" value="" /> <input type="password" name="userpass" value="" /> <input type="submit" value="Отправить" /> </form> </div>
Разберем все по порядку
$(‘.ajaxify’).each(function(){ – перебираем все элементы с классом .ajaxify на странице и для каждого вызываем безымянную функцию, в которой
$(this).on(‘submit’,’form’,{parent:this},function(e){ – прикрепляем к элементу обработчик события onsubmit.
Метод .on() в jQuery очень полезен, т.к. нам не надо прикреплять обработчики к самим формам – второй аргумент функции принимает строку (обычный селектор jQuery), по которой будут фильтроваться источники события.
В нашем случае это просто все элементы form.
Когда событие, благодаря bubbling дойдет до нашего элемента, будет проверен его источник на соответствие селектору и, если все в порядке, выполнена функция (четвертый аргумент метода on()), аргумент для которой – это само событие.
Третий аргумент ({parent:this}) устанавливает свойство объекта data в событии e. Т.е. в нем у нас будет указан наш элемент. Получить его мы сможем так: e.data.parent
e.preventDefault(); – предотвращаем стандартное действие при отправке формы. Это переход по адресу в action – аттрибуте формы. Нам этого совсем не надо.
$.post( – метод jQuery, который как раз и отправляет данные формы на сервер через POST (если нужно больше фукционала, смотрите в сторону метода jQuery .ajax()). Его аргументы:
$(this).attr(‘action’) – адрес для отправки запроса. Берем аттрибут action нашей формы.
$(this).serialize() – сами данные. Их мы сериализуем методом .serialize(). Выковоривать данные из формы не требуется, метод можно просто вызывать для формы целиком, что мы и делаем.
function(data){ – callback-функция, которая будет вызвана при удачном получении данных от сервера. Аргумент – полученные данные.
$(e.data.parent).html(data); – в ней мы просто берем наш элемент-обертку из e.data.parent и заменяем html в нем на то, что получили.
C чем могут возникнуть проблемы:
Метод .serialize() кодирует данные в UTF-8. Если на вашем сервере используется другая кодировка, не забудьте перекодировать полученные из формы данные, например с помощью iconv (для PHP).
Сервер не умеет определять, ajax запрос был или нет, не умеет отдавать части страницы и возвращает нам все страницу целиком, вместе с шапкой, подвалом и т.п. (это, конечно, проблема CMS, а не самого сервера). Надо будет дорабатывать ядро сайта, но это тема для другой статьи. Можно только отметить, что определить, был использован ajax запрос или нет, можно с помощью (PHP):
if(!empty($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’)
Сервер возвращает xml или json — надо будет парсить результат (jQuery сам преобразует json в объект, но дальше нужно будет что-то с ним делать).
На этом все, желаем успехов.