Praktyczne użycie AJAX

Pobieranie danych z serwera

W poniższym przykładzie wysyłamy żądanie GET pod adres 'http://example.com/data.json' i oczekujemy odpowiedzi w formacie JSON. Kiedy serwer zwróci odpowiedź, wyświetlamy dane w elemencie strony o id 'myDiv'.

								
$.ajax({
  url: 'http://example.com/data.json',
  dataType: 'json',

  success: function(data) {

  // wyświetlenie danych na stronie
  $('#myDiv').html(data.text);
  }
});

Wysyłanie danych na serwer

W poniższym przykładzie wysyłamy dane z formularza na adres 'http://example.com/submit.php' za pomocą metody POST. Kiedy serwer zwróci odpowiedź, wyświetlamy potwierdzenie na stronie.

								
$('#myForm').submit(function(e) {
  e.preventDefault();
  var formData = $(this).serialize();

$.ajax({
  url: 'http://example.com/submit.php',
  type: 'POST',
  data: formData,
  success: function(data) {
    // wyświetlenie potwierdzenia na stronie
    $('#myDiv').html(data.message);
  }
 });
});

Ładowanie danych dynamicznie

W poniższym przykładzie ładowanie danych rozpoczyna się po kliknięciu przycisku o id 'myButton'. Wysyłamy żądanie GET pod adres 'http://example.com/data.html' i oczekujemy odpowiedzi w formacie HTML. Kiedy serwer zwróci odpowiedź, wstawiamy dane na stronie w elemencie o id 'myDiv'.

								
$('#myButton').click(function() {
  $.ajax({
    url: 'http://example.com/data.html',
    dataType: 'html',
    success: function(data) {
      // wstawienie danych na stronie
      $('#myDiv').html(data);
    }
   });
});

Aktualizacja zawartości co czas

								
setInterval(function() {
  $.ajax({
    url: 'http://example.com/data.json',
    dataType: 'json',
    success: function(data) {
      // wyświetlenie danych na stronie
    $('#myDiv').html(data.text);
   }
});
}, 5000);