Рубрики1
Социалки
Новые статьи

Оригинал сообщения

Привет. Сегодня поговорим об отправке форм с помощью Ajax.
Начнем с верстки формы.


HTML форма

Test From


Javascript скрипт обработки формы

Все, форма есть. Нам нужно, чтобы при нажатии на кнопку Enter в любом из полей (сработает событие формы Submit), или при нажатии на кнопку Send в форме, без перезагрузки страницы введенные пользователем данные отправились на сервер. Напишем небольшой кусочек кода на Jquery:

 $(function(){ $('#test_form').submit(function(e){ //отменяем стандартное действие при отправке формы e.preventDefault(); //берем из формы метод передачи данных var m_method=$(this).attr('method'); //получаем адрес скрипта на сервере, куда нужно отправить форму var m_action=$(this).attr('action'); //получаем данные, введенные пользователем в формате input1=value1&input2=value2..., //то есть в стандартном формате передачи данных формы var m_data=$(this).serialize(); $.ajax({ method: m_method, url: m_action, data: m_data, success: function(result){ $('#test_form').html(result); } }); }); }); 

Вот и все, клиентская часть закончена. В самом начале мы привязываем на событие формы Submit собственную функцию, затем запрещаем стандартное действие формы, для того, чтобы страница не перезагружалась, затем получаем адрес скрипта для обработки данных, и метод передачи данных (GET или POST) и сами данные, с помощью встроенной функции serialize, которая перебирает все поля формы, и составляет из них строку в формате имяполя=значение&имяполя2=значение2 и т.д. и отправляем все данные при помощи Ajax. После того, как клиентская часть получит ответ от сервера, заменяем все внутренности формы на результат полученный от серверной части.

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


PHP часть обработки формы


Для этого примера достаточно и такого серверного скрипта :)


Рекомендация

Сейчас эра спам-ботов. Один из самых простых способов защиты от спам-ботов — это отправка формы через Ajax. Боты — это обычные программы, чаще всего они не могут обрабатывать javascript. Поэтому можно просто сделать форму без указания атрибута action, и тогда бот не сможет отправить данные, он просто отправит их не на тот скрипт и они не обработаются. В то же время на javascript будет Ajax обработчик, который отправит данные в нужное место. Следовательно адекватный человек, у которого включена поддержка javascript в браузере без проблем сможет отправить форму, и ему не придется вводить эти ужасные каптчи.

LIci WP