Przesyłanie danych z formularza za pomocą AJAX

Założenie: Przesłać dane z formularza HTML do skryptu PHP za pomocą AJAX bez przeładowywania strony.

Krok po kroku:

1. Krok 1: Formularz HTML. Utworzymy prosty formularz z polem tekstowym i przyciskiem.

<form id="myForm">
  Imię: <input type="text" name="imie" id="imie">
  <button type="button" id="submitBtn">Wyślij</button>
</form>
<div id="result"></div>
				

2. Krok 2: Skrypt JavaScript z AJAX. Ten skrypt obsłuży wysłanie danych do pliku PHP.

document.getElementById('submitBtn').addEventListener('click', function() {
  let imie = document.getElementById('imie').value;
  let xhr = new XMLHttpRequest();
  xhr.open('POST', 'process.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
    if (this.status == 200) {
      document.getElementById('result').innerHTML = this.responseText;
    }
  };
  xhr.send('imie=' + imie);
});
				

3. Krok 3: Skrypt PHP (process.php). Ten skrypt odbierze i przetworzy dane.

<?php
  $imie = $_POST['imie'];
  echo "Witaj, " . $imie . "! Twoje dane zostały przesłane.";
?>
				

4. Krok 4: Połączenie elementów. Upewnij się, że pliki HTML i PHP znajdują się w tym samym katalogu, a JavaScript jest poprawnie dołączony do strony HTML.

Ten przykład pokazuje podstawy przesyłania danych z formularza za pomocą AJAX. Zachęcamy do dalszego zgłębiania tematu i eksperymentowania z różnymi metodami i bibliotekami AJAX.