Блог

06.07.2011

AJAX-форма на jQuery

Я расскажу вам о том, как сделать AJAX-форму с использованием фреймворка jQuery. AJAX - это технлогия "фонового" обмена браузера с сервером, на котором выполняется скрипт. При использовании таких форм ваше php-приложение будет более удобным и быстрым.

Всё на самом деле очень просто. Нужно подключить jQuery и два скрипта. Первый скрипт - это, собственно, плагин jquery.form.js. Скачать можно тут. Второй - скрипт настроек, его разберём подробнее.

$(document).ready(function(){
  var options = { 
    // элемент, который будет обновлен по ответу сервера 
  	target: ".help",
    beforeSubmit: showRequest, /* функция перед передачей, например, можно показать 
	лоадер в каком-нибуть DIV`е. */
    success: showResponse, // функция при получении ответа
    timeout: 8000 // максимальное время ожидание ответа формы от сервера
  };
  
  // привязываем событие submit к форме
  $('#myForm').submit(function() { 
    $(this).ajaxSubmit(options); 
    // всегда возвращаем false, чтобы предупредить стандартные
    // действия браузера (переход на страницу указанную в action формы) 
    return false;
  }); 
});

// вызов перед передачей данных
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    // jqForm это jQuery объект, содержащий элементы формы.
    // Для доступа к элементам формы используйте 
    // var formElement = jqForm[0]; 
    // здесь можно вернуть false чтобы запретить отправку формы; 
    // любое отличное от fals значение разрешит отправку формы.
    return true; 
} 
 
// вызов после получения ответа 
function showResponse(responseText, statusText)  { 
    // для обычного html ответа, первый аргумент - свойство responseText
    // объекта XMLHttpRequest
}

Далее вставляем, собственно, форму. Я опишу её атрибуты:

В action формы - будет ссылка на PHP скрипт, к которому обращается форма
В id должна быть прописана в настройке скрипта (см. выше), в нашем случае это myForm
method - POST

Приер php-скрипта, к которому обращается форма:

header('Content-Type: text/html; charset=utf-8');

if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
	if(!empty($_POST["myName"])):
		
		// Выполняем какие-либо действия, например, шлём email
		mail('mail@mail.com', 'Тема', 'Сообщение:'.);
		
		// Также не забываем что надо вывести какое-то сообщение 
		// в обновляемый после ответа див
		echo "Спасибо за сообщение.";
		
	else:
	
		echo "Вы не заполнили поле, попробуйте еще раз.";
	
	endif;
}

Вот и всё, удачной работы с AJAX-формой на jQuery!