logo

Наше кредо

Ежедневно интернет-магазины наших клиентов становятся более эффективными, удобными и прибыльными.

Мы заботимся о том, чтобы клиенты наших клиентов чувствовали комфорт и заботу во время покупки.

Специалисты компании «Дизаж студио» верят, что помогая людям они делают мир лучше.

company@desagestudio.com

Мск.: +7 (495) 118-25-19

СПб.: +7 (812) 425-14-63

Ajax-ифицируем любую форму на странице (отправка формы через ajax + jQuery)

Интернет мастерская DesageStudio > Мысли вслух  > Ajax-ифицируем любую форму на странице (отправка формы через ajax + jQuery)
a

Ajax-ифицируем любую форму на странице (отправка формы через ajax + jQuery)

В наши непростые времена уже как-то стыдно отправлять форму и получать результат на новой странице. Нижеизложенный скрипт с использованием 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 в объект, но дальше нужно будет что-то с ним делать).
На этом все, желаем успехов.