Плагин 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 |