Wysyłanie formularza bez przeładowania strony - jak to zrobić

Aby wysłać formularz bez przeładowania strony, możesz użyć technologii AJAX (Asynchronous JavaScript and XML). Pozwala ona na asynchroniczne wysyłanie danych na serwer i odbieranie odpowiedzi bez konieczności przeładowania całej strony. Możesz użyć czystego JavaScriptu lub biblioteki jQuery, aby to zrealizować.

1. AJAX z czystym JavaScriptem

Oto przykład z wykorzystaniem XMLHttpRequest:

HTML:

<form id="myForm">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <button type="submit">Submit</button>
</form>
<div id="result"></div>

JavaScript:

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Zatrzymanie domyślnego zachowania (przeładowania strony)

  var form = document.getElementById('myForm');
  var formData = new FormData(form);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'server.php', true); // Zamień 'server.php' na adres swojego endpointu

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      document.getElementById('result').innerHTML = xhr.responseText;
    }
  };

  xhr.send(formData);
});

W tym przykładzie dane formularza są wysyłane na serwer asynchronicznie, a odpowiedź jest wyświetlana w elemencie o ID result bez przeładowania strony.

2. AJAX z wykorzystaniem jQuery

Jeśli korzystasz z biblioteki jQuery, proces jest jeszcze prostszy:

HTML:

<form id="myForm">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <button type="submit">Submit</button>
</form>
<div id="result"></div>

jQuery:

$('#myForm').on('submit', function(event) {
  event.preventDefault(); // Zatrzymanie przeładowania strony

  $.ajax({
    url: 'server.php', // Zamień na swój endpoint
    type: 'POST',
    data: $(this).serialize(), // Konwertuje dane formularza do formatu URL-encoded
    success: function(response) {
      $('#result').html(response);
    }
  });
});

Jak to działa:

event.preventDefault() zatrzymuje domyślne działanie formularza (czyli przeładowanie strony).
FormData(form) (w przypadku czystego JavaScriptu) lub $(this).serialize() (w jQuery) pobiera dane formularza.
Wysłanie żądania do serwera odbywa się asynchronicznie, a odpowiedź serwera jest wyświetlana w wyznaczonym elemencie (#result).

Obydwa sposoby zapewniają bezproblemowe przesyłanie formularza bez przeładowania strony.