AJAX-форма на jQuery

Исторический материал из архива сайта. Указанные услуги и контакты относятся ко времени публикации и не являются действующим предложением.

AJAX-форма на jQuery

AJAX-форма на jQuery

0
06.07.201100:006 Июля 2011 0:00
Я расскажу вам о том, как сделать 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!
Ваше имя*
 
E-mail
Тема

Добавить файлы
#name#
#size#
 
#name#
Файлы:
Перетащите один или несколько файлов в эту область
или выберите файл на компьютере
Файлы:
Загрузить файлы
Код подтверждения (символы на картинке)*
Отправить