Привет. Сегодня поговорим об отправке форм с помощью 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({
type: 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 в браузере без проблем сможет отправить форму, и ему не придется вводить эти ужасные каптчи.