Як відправити форму за допомогою jQuery Ajax ($.ajax)

Відправка форми за допомогою методу $.ajax jQuery є способом надсилання даних на сервер без перезавантаження сторінки. Цей підхід покращує взаємодію з користувачем і забезпечує більш динамічну взаємодію. Ви можете обробляти надсилання форми кількома способами, або шляхом серіалізації всієї форми, або вручну збираючи вхідні значення.

Приклад 1: використання serialize()

Функція serialize() автоматично кодує всі поля форми у формат рядка запиту. Ось як ви можете ним скористатися:

HTML

<form id="myForm">
  <input type="text" name="username" />
  <input type="email" name="email" />
  <button type="submit">Send</button>
</form>

JavaScript

$('#myForm').on('submit', function(ev) {
    ev.preventDefault(); // prevent default form submit
    $.ajax({
      type: 'POST',
      url: '/submit.php',
      data: $(this).serialize(),
    }).done(function(response){
      console.log('Server response:', response);
    }).fail(function(){
      console.log('Submission failed.');
    });
});

У цьому випадку всі введені форми автоматично збираються та надсилаються через POST.

Приклад 2: Збір даних форми вручну

Якщо вам потрібен додатковий контроль (наприклад, спеціальна обробка або виключення полів), ви можете створити об’єкт даних самостійно:

JavaScript

$('#myForm').on('submit', function(ev) {
    ev.preventDefault(); // prevent default form submit

    const formData = {
      username: $('input[name="username"]').val(),
      email: $('input[name="email"]').val()
    };

    $.ajax({
      type: 'POST',
      url: '/submit.php',
      data: formData,
    }).done(function(response){
      console.log('Server response:', response);
    }).fail(function(){
      console.log('Submission failed.');
    });
});

Використовуючи цей метод, ви можете попередньо обробити дані перед їх відправкою.

Висновок

Обидва способи ефективні та залежать від ваших потреб. Використовуйте serialize() для простих форм і ручний метод, коли вам потрібна більша гнучкість. $.ajax jQuery робить обробку форм чистішою та інтерактивнішою, особливо для сучасних веб-додатків.