Sieć z jQuery

9.1 $ obiekt i metoda ajax w jQuery

jQuery posiada również specjalny obiekt globalny do pracy z siecią. Jak można się domyślić, to tzw $. Tak, to jest imię. Ale to proste i wygodne.

Załóżmy, że chcesz wysłać żądanie do interfejsu API w swoim JavaScript i przetworzyć otrzymaną odpowiedź. Można to zrobić w następujący sposób:

$.ajax({
  type: "POST",
  url: "api.codegym.cc",
  data: {name: 'Bill', location: 'Radmond'},
  success: function(msg){
    alert( "Person found: " + msg );
  }
});

To wszystko, to cały kod. $Wywołujemy metodę na obiekcie ajax(), gdzie przekazujemy obiekt opisujący wszystko, czego potrzebujemy: zarówno żądanie, jak i odpowiedź.

• Pole typeokreśla typ żądania HTTP: GETlubPOST
• Pole urlokreśla, urldo którego żądania zostanie wysłane.
• Pole dataokreśla dane żądania w formacie JSON
• Pole sukcesu określa funkcję, która ma zostać wywołana po pomyślnej odpowiedzi z serwera.

9.2 Przydatne zapytania

Ale jeśli nie musisz przesyłać żadnych danych, żądanie można napisać jeszcze krócej. Na przykład możesz napisać proste żądanie POST, takie jak to :

$.post("ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

Czy wiesz, co robi kod $( ".result" ).html( data );? Spróbujmy zgadnąć...

Znajduje element z klasą wyniku w dokumencie i dodaje do niego kod HTML - data data. Tak więc w kilku linijkach możesz pobrać dane z serwera i dodać je do swojej strony. Cóż, czy to nie piękno? :)

Żądanie GET można również zapisać w kilku wierszach:

$.get("ajax/test.html"., function( data ) {
  $( ".result" ).html( data );
});

Czy chcesz pobrać i wykonać skrypt?

$.ajax({
  method: "GET",
  url: "test.js",
  dataType: "script"
});

Pobierz najnowszą stronę HTML?

$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

W Internecie jest bardzo dobra dokumentacja jQuery:

API jQuery

jQuery.ajax()

Ponadto wszystkie często zadawane pytania można łatwo wyszukać w Google i znaleźć na StackOverflow.