• Главная
    • »
  • jQuery
    • »
  • jQuery: Плагин для асинхронной отправки форм

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

Дата: 16.10.2016 в 18:39, Категория: jQuery
  • 4910
  • 11
jQuery: Плагин для асинхронной отправки форм

Прошло не мало времени, с момента последней статьи. Я не мог написать ни статью, ни покодить и даже заняться своими проектами. Причиной всему явилось то, что мой макбук неожиданно решил, что он достаточно отработал и пора экрану отрубиться и больше не включаться. К счастью, у меня была гарантия до 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

Тэги: