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