jQuery: Плагин для асинхронной отправки форм
-
6850
-
12

Прошло не мало времени, с момента последней статьи. Я не мог написать ни статью, ни покодить и даже заняться своими проектами. Причиной всему явилось то, что мой макбук неожиданно решил, что он достаточно отработал и пора экрану отрубиться и больше не включаться. К счастью, у меня была гарантия до 2017 года и я смог отдать в сертифицированный сервисный центр Apple, который находился в Пятигорске. Вчера мой ноутбук уже починили и сейчас, я могу написать очередную статью связанную с jQuery плагином.
На этот раз, я хотел бы рассказать про очень полезный и весьма простой в использовании плагин jQuery.fajax от разработчика @aziev.
При разработке своих проектов, я стал замечать, что для отправки форм AJAX-ом я пишу практически один и тот же код, раз за разом. Наверное, было бы разумно вынести весь этот код в отдельный файл, на что, я кстати и хотел написать подобный плагин.
После того, как пошарил разные репозитории на Github'е, я наткнулся на плагин jQuery Form Plugin, который выполняет требуемую задачу, но в то же время имеет большой для меня минус. Он содержит в себе кучу ненужных функций и весит 43 kb.
# Чем fajax полезен?
К примеру, если у вас многие запросы выполняются через AJAX и имеется форма, которая портит асинхронность сайта. С помощью данного плагина, элемент <form>
можно превратить в "AJAX форму" и в дальнейшем, отправка данной формы будет выполняться через метод $.ajax()
. Так же, данный плагин поддерживает отправку файлов.
В качестве примера, я решил показать вам как работает стандартная форма.

Нет возможности проверить ответ от сервера и в любом случае, моя страница должна обновиться. А это не сильно радует, если сайт в большей степени на AJAX запросах. Придется обрабатывать данный запрос на PHP и уже выводить каким-то образом информацию клиенту, после обновления страницы.
А в следующей демонстрации, я уже подключил данный плагин и как видим, страницы не обновляется и получаем ответ мгновенно. Это довольно приятно, не правда ли?

Если кому-то понравился дизайн формы, то я использовал очень крутой CSS фреймворк Semantic UI. Ничем не хуже того же Bootstrap.
Сам запрос, выглядит примерно так.

Говоря о самом плагине, то он не только упрощает работу с формой, но и разработку самого кода. Я покажу ниже разницу, чтобы вы сравнили стандартный метод и метод с плагином.
# HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery.fajax Demo</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ui container">
<div class="ui form">
<form action="https://httpbin.org/post" method="post">
<div class="field">
<label>Fullname</label>
<input type="text" name="fullname" placeholder="Amon Bower">
</div>
<div class="field">
<label>Phone</label>
<input type="text" name="phone" placeholder="+7 (999) 123-456-789">
</div>
<div class="field">
<label>Text</label>
<textarea name="text" placeholder="Enter your comments"></textarea>
</div>
<div class="field">
<label for="attach" style="color: #fff" class="ui green button">Attach file</label>
<input type="file" name="attach" id="attach" style="display:none">
</div>
<div class="inline fields">
<label>Choose your gender</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" value="male" name="gender" checked="checked">
<label for="gender">Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" value="female" name="gender">
<label>Female</label>
</div>
</div>
</div>
<div class="ui segment">
<div class="field">
<div class="ui toggle checkbox">
<input type="checkbox" name="checkbox" tabindex="0" class="hidden">
<label>Do you wana test the checkbox (toggle check)?</label>
</div>
</div>
</div>
<div class="field">
<button type="submit" class="ui fluid big submit button">Send form</button>
</div>
</form>
<div class="ui hidden message">
<div class="header">Form Completed!</div>
<p>Your form successfully sent!</p>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="jquery.fajax.js"></script>
<script src="main.js"></script>
</body>
</html>
# Стандартный метод
$('form').submit(function(e){
e.preventDefault();
var fd = new FormData();
fd.append('fullname', $('input[name="fullname"]').val());
fd.append('phone', $('input[name="phone"]').val());
fd.append('text', $('textarea').val());
fd.append('gender', $('input[name="gender"]:checked').val());
fd.append('checkbox', $('input[type="checkbox"]:checked').val());
fd.append('attach', $('#attach')[0].files[0]);
$.ajax({
url : 'https://httpbin.org/post',
type : 'POST',
mimeTypes: 'multipart/form-data',
data : fd,
processData: false,
contentType: false,
success : function(data) {
// code...
}
});
});
И чем больше у вас AJAX форм, тем больше подобного кода, будет занимать ваш JS файл. Не особо радует. Теперь, попробуем повторить тоже, только с данным плагином.
$('form').fajax({
success: function(data){
// code...
},
error: function(data){
// code...
}
});
Как видите, разница огромная. Вам уже не потребуется добавлять в FormData()
отдельно поля и файлы и это все пихать в $.ajax()
.
Так же, этот метод поддерживает еще два обработчика. Это beforeSend(data)
и complete(data)
. Ниже, я дал описание каждому методу.
- beforeSend(data) - перед отправкой формы, может выполняться данный метод. К примеру, перед отправкой формы, мы можем выводить иконку загрузки.
- complete(data) - после отправки формы (не важно какой ответ от сервера был получен), вызывается этот метод.
- success(data) - вызывается в случае успешной отправки запроса на сервер.
- error(data) - вызывается ошибки, при отправке запроса на сервер.
Как вы заметили, каждый метод хранит в заголовке переменную data
. В данной переменной, будет содержаться ответ от сервера, отправленный методом $.ajax()
.
Вот таким простым плагином, можно упростить разработку AJAX форм. К примеру, мне он очень пригодился и я его буду использовать при разработке следующих заказов.
Ниже рабочий пример данного плагина + прикрепил архив: jQuery.fajax + Demo.
# Демо
Автор данного плагина Mikail Aziev (@aziev) Ссылка на репозиторий: jQuery.fajax
ПОДПИШИСЬ НА ОБНОВЛЕНИЯ
Только новые публикации и никакого мусора.