AJAX-формы с помощью плагина jQuery Form

Плагин jQuery Form существует достаточно давно, но я им начал пользоваться относительно недавно. Отправка формы по AJAX — задача, в принципе, не сложная, и я обычно программировал её сам. Но недавно решил попробовать этот плагин, и понял, что это гораздо удобнее.

Итак, начнём рассмотрение. Официальная страница планина http://malsup.com/jquery/form/. Плагин совместим с последней версией jQuery, очень прост в использовании. Начнём с его элементарного применения. На официальном сайте приведён следующий пример:

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head> 
<body>
<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>
</body>
</html>

Как видите, всё как обычно. Теперь о самом главном. По-первых, плагин не подавляет проверку формы браузером. Т.е. если часть полей отметить как required, части полей задать type=’number’ или type=’email’, то браузер перед отправкой формы всё равно проверит правильность заполнения таких полей. Во-вторых, плагин позволяет отправлять на сервер файлы. Для этого просто пишите обычную форму с полем type=’file’, файл будет отправлен куда нужно. И в-третьих, вы можете обрабатывать ответ от сервера. Остановимся подробнее на последнем.

Для того, чтобы обработать ответ от сервера, надо указать в вызове ajaxForm несколько опций:

dataType Указывает, какого типа данные возвращает сервер. Значения null, ‘xml’, ‘script’, или ‘json’. При значении script ответ сервера будет исполнен как JS в глобальном контексте, при значении xml — будет передан как responseXML в функцию success, при значении json — будет вычислен и передан в функцию success (см. ниже
success Функция, принимающая один параметр, тип которого зависит от значения dataType

И так, наш вызов ajaxForm превращается в такой:

$('#myForm').ajaxForm({dataType: "json", success: function (data) {alert(data.resp); });

С полным списком параметров ajaxForm вы можете ознакомиться на сайте плагина, я же приведу те, которые на мой взгляд наиболее интересны:

beforeSubmit Функция, которая вызывается перед отправкой формы, позволяет навесить дополнительные задачи по валидации
clearForm если true, после успешной отправки форма будет автоматически очищена
data Позволяет помимо формы передать на сервер дополнительные данные
target Элемент, в который (или вместо которого) будет автоматически подставлен ответ сервера. Поведение зависит от значения параметра replaceTarget
replaceTarget Определяет, будет ли указанный в target элемент заменён полностью (true), или же надо менять только его содержимое (false)

Также большой практический интерес представляют несколько функций, помимо ajaxForm.

ajaxSubmit Немедленно отправляет форму на сервер (в отличии от ajaxForm, которая дожидается нажатия пользователем кнопки submit). В остальном параметры аналогичны ajaxForm
resetForm Возвращает форму в исходное состояние при помощи соответствующих методов JavaScript по работе с DOM
clearForm Опустошает все поля ввода, textarea. В элементах select убирает у всех option атрибут selected

6 комментариев

  1. А этот плагин сможет работать с несколькими формами на одной странице? Ну к примеру у форм разные id и один обработчик обрабатывает любую заполненную форму???

  2. Добрый день!
    Сразу к делу)
    Тег ввода находится вне тега формы, при отправке на сервер значение задваиваеться
    пример: «123456,123456»
    возможно вы поможете?

Добавить комментарий

Ваш e-mail не будет опубликован.