Плагин jQuery Form позволяет не только сделать новые ajax-формы, но и довольно просто «проапгрейдить» уже существующие формы таким образом, чтобы их можно было использовать вместе с Ajax. Основные методы, ajaxForm и ajaxSubmit, собирают информацию из элементов формы, поддерживают многочисленные опции, использование которых даст полный контроль над передачей данных.

Итак, начнем. Нам потребуется подключить к странице два файла: библиотеку jQuery и файл jquery.form.js. Сделаем это в разделе HEAD.

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

Затем создадим самую простейшую форму, не содержащую какой-либо специальной разметки:

<form id="myForm" action="comment.php" method="post">
  Имя: <input type="text" name="name" />
  Комментарий: <textarea name="comment"></textarea>
  <input type="submit" value="Комментировать" />
</form>

и добавим еще немного javascript:

<script type="text/javascript">
$(document).ready(function(){
   $("#myForm").ajaxForm(function() {
     alert("Спасибо за комментарий!");
   });
});
</script>

Вот так просто, но поспешу Вас разочаровать – то, что мы сделали, из серии «пыль в глаза». Объясню почему. Когда мы нажмем кнопку «Комментировать» значения полей name и comment будут переданы методом POST файлу comment.php. Если сервер вернет успешный ответ (т.е. всего лишь код 200) – пользователь увидит сообщение «Спасибо за комментарий!».

Эффектнее было бы не выводить сообщение в alert(), а вставить сообщение непосредственно в DOM.

Так что все, что мы здесь выиграли – избавились от перезагрузки страницы, в принципе уже неплохо, но хотелось бы большего…

Но давайте сначала попробуем выяснить, в чем его отличие метода ajaxForm от метода ajaxSubmit. Оба метода либо не принимают аргументов, либо принимают один аргумент, который может быть или функцией или объектом (в парах ключ/значение могут быть переданы различные опции).

Первое отличие состоит в том, что метод ajaxSubmit отправляет данные из формы, а метод ajaxForm – нет. Когда вызывается метод ajaxSubmit он упорядочивает данные формы в строку запроса и отправляет их серверу. Когда же вызывается метод ajaxForm – он только добавляет необходимое событие в форму таким образом, что можно определить, когда пользователь отправил данные.
Второе отличие: при использовании ajaxForm передаваемые значения будут включать пару имя/значение для самой кнопки (как в примере, или координаты клика мышью, если используется картинка).
Вывод: это не значит, что метод ajaxForm – плохой, а метод ajaxSubmit – хороший. Просто они разные. И какой именно метод использовать – надо решать в каждом конкретном случае.

Давайте теперь познакомимся с доступными опциями, которые принимают оба этих метода. Посмотрим фрагмент кода, чтобы увидеть как задаются опции:

// готовим объект
var options = {
  target: "#divToUpdate",
  url: "form.php",
  success: function() {
        alert("Спасибо за комментарий!");
  }
};
// передаем опции в  ajaxSubmit
$("#myForm").ajaxSubmit(options);

target – идентифицирует тот элемент (или элементы) на странице, который должен быть обновлен при поступлении ответа от сервера. Значение может быть определено как объект или селектор jQuery или элемент DOM. Значение по умолчанию – null.
url – URL, куда должны быть переданы данные из формы. Значение по умолчанию – значение атрибута action формы.
type – метод, с помощью которого должны быть отправлены данные из формы (GET или POST). Значение по умолчанию – значение атрибута method формы. Если атрибут не определен, используется метод GET.
beforeSubmit – функция, которая будет вызвана до отправки данных из формы. Функция, вызываемая тут, может позволить выполнить какие-либо действия до отправки данных, например проверку введенных данных. И если она возвращает false – данные не будут отправлены на сервер. Принимает три аргумента: массив с данными формы, jQuery-объект формы, объект из опций определенных в ajaxForm/ajaxSubmit. Массив данных формы принимает такой вид:

[ { name: "username", value: "Vasya" },
 { name: "password", value: "secret" } ]

Значение по умолчанию – null.
success – функция, которая будет вызвана после отправки данных серверу и при условии успешного ответа сервера. Полученные данные – или responseText или responseXML, в зависимости от значения опции dataType. Значение по умолчанию – null.
dataType – определяет ожидаемый тип данных в ответе сервера. Может принимать значения: null, «xml«, «script«, или «json«. Опция позволяет точно определить, как именно должен быть обработан ответ сервера.
- «xml»: if dataType == «xml» ответ сервера рассматривается как XML и в success (если опция определена) отправляется значение responseXML;
- «json»: if dataType == «json» ответ сервера будет выполнен и передан в success (если опция определена);
- «script»: if dataType == «script» ответ сервера будет выполнен в глобальном контексте;
Значение по умолчанию – null.
semantic – флаг, определяющий должны ли данные передаваться в строгом порядке следования (это происходит медленнее).

Упорядочивание данных формы происходит в порядке следования элементов, исключая элементы input, имеющие тип image.

Вы должны всего лишь установить эту опцию в true, если Ваш сервер требует строгого порядка следования И форма содержит элементы input типа image. Значение по умолчанию – false.
resetForm – флаг, определяющий должна ли форма быть сброшена если передача данных была успешной. Значение по умолчанию – null.
clearForm – флаг, определяющий должна ли форма быть очищена если передача данных была успешной. Значение по умолчанию – null.

Методы ajaxForm и ajaxSubmit не единственные. Давайте немного познакомимся с остальными.

Метод formSerialize – упорядочивает данные из элементов формы в строку запроса. Метод возвращает строку в формате: name1=value1&name2=value2.

var qString = $("#myFormId").formSerialize();
  // теперь данные могут быть отправлены
  //  через $.get, $.post, $.ajax, и т.д.
$.post("myscript.php", qString);

Метод fieldSerialize – упорядочивает данные из элементов формы в строку запроса. Удобно применять, когда требуется упорядочить в строку запроса только часть данных из формы. Метод возвращает строку в формате: name1=value1&name2=value2

var qString = $("#myFormId .myFields").fieldSerialize();

Метод fieldValue – возвращает значения выбранных элементов в виде массива. С версии 0.91, метод всегда возвращает именно массив. Если нет корректных данных возвращается пустой массив, в противном случае массив содержит один или более элементов.

// получаем значения для полей с типом password
var value = $("#myFormId :password").fieldValue();
alert("Пароль: " + value[0]);

Метод resetForm – сбросит форму в начальное состояние через новый вызов элементов формы из объектной модели документа.

$("#myFormId").resetForm();

Метод clearForm – очищает элементы формы. Этот метод очистит все элементы ввода с типом text, password, textarea, очистит выбор в элементах select и снимет отметки с элементов radio и checkbox.

$("#myFormId").clearForm();

Метод clearFields – очищает элементы формы. Удобно применять когда требуется очистить только часть формы.

$("#myFormId .myFields").clearFields();

Согласен, согласен… Получилось очень много и довольно нудно. Поэтому вот Вам пример формы, попробуйте его, а при желании посмотрите исходные коды этого примера. Я старался все очень подробно комментировать.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Важно! Помните, что любая форма – потенциальная дыра в безопасности. Никогда не стоит полагаться на проверку данных на стороне клиента. Обязательно производите проверку данных на сервере!

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal