На этом шаге мы дадим краткую характеристику расширения Form.
Расширение Form - отличный пример сценария, делающего решение трудных и сложных задач достаточно простым. Файл расширения, а также подробная документация доступны по адресу: http://malsup.com/jquery/form/.
Основой расширения является метод .ajaxForm(). Он позволяет превратить обычную форму в форму с поддержкой AJAX всего одной простой строчкой кода:
$(document).ready(function() {
$('#myForm').ajaxForm();
});
Этот пример подготовит форму <form id="myForm"> к отправке данных без необходимости полного обновления текущей страницы. Уже сама по себе эта возможность является привлекательной, но ее истинная мощь обеспечивается за счет отображения параметров, которые можно передавать методу. Например, следующий фрагмент вызывает метод .ajaxForm() с параметрами target, beforeSubmit и success:
$(docunent).ready(function() {
function validateForm() {
// Здесь можно поместить программный код, выполняющий проверку формы
// мы можем вернуть значение false,
// чтобы отменить операцию отправки данных
};
$('#test-form').ajaxForm({
target: '#log'
beforeSubmit: validateForm,
success: function() {
alert('Благодарим за Ваши комментарии!');
}
});
});
Параметр target определяет элементы (в данном случае элемент со значением атрибута id="log"), которые будут обновлены данными, полученными от сервера.
Параметр beforeSubmit позволяет определить операции, которые будут выполняться перед отправкой формы. В этом примере параметр ссылается на функцию validateForm(). Если функция вернет значение false, форма не будет отправлена на сервер.
Параметр success позволяет определить операции, которые будут выполняться после успешной отправки формы. В данном примере просто выводится сообщение, извещающее пользователя о том, что форма была отправлена.
В число других параметров, которые можно передавать методу .ajaxForm() и которые напоминают параметр .ajaxSubmit(), входят:
- url: адрес URL, по которому должны отправляться данные формы, если он отличается от указанного в атрибуте action формы.
- type: метод отправки формы - или GET, или POST. По умолчанию используется метод, указанный в атрибуте method формы, или метод GET в случае его отсутствия.
- dataType: ожидаемый тип данных ответа сервера. Возможные значения: null, xml, script и json. По умолчанию используется значение null (ответ в формате HTML).
- resetForm: тип Boolean; значение по умолчанию false. Если в этом параметре передать значение true, то после успешной отправки все поля формы будут сбрасываться в значения по умолчанию.
- clearForm: тип Boolean; значение по умолчанию false. Если в этом параметре передать значение true, то после успешной отправки все поля формы будут очищены.
Расширение Form предоставляет несколько других методов, оказывающих помощь в обработке форм и их данных. Поближе познакомиться с этими методами, а также с демонстрационными примерами можно на странице http://malsup.com/jquery/form/.
На следующем шаге мы рассмотрим cоветы и рекомендации по использованию методов .ajaxForm() и .ajaxSubmit().
