9.1 $ objektum és ajax metódus a jQuery-ben

A jQuery rendelkezik egy speciális globális objektummal is a hálózattal való együttműködéshez. Ahogy sejtheti, úgy hívják $. Igen, ez a név. De egyszerű és kényelmes.

Tegyük fel, hogy kérelmet szeretne küldeni egy API-nak a JavaScriptben, és feldolgozni a kapott választ. Ezt így lehet megtenni:


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

Ennyi, ennyi a kód. $Meghívjuk az objektum metódusát ajax(), ahol átadjuk azt az objektumot, amely mindent leír, amire szükségünk van: a kérést és a választ is.

  • A mező typemegadja a HTTP-kérés típusát: GETvagyPOST
  • A mező urlmegadja, urlhogy a kérés melyik címre kerüljön elküldésre.
  • A mező datamegadja a kérés adatait JSON formátumban
  • A siker mező megadja a függvényt, amelyet a szerver sikeres válasza után kell meghívni .

9.2 Hasznos kérdések

De ha nincs szükség adatátvitelre, akkor a kérés még rövidebben is megírható. Például írhat egy egyszerű POST kérést , mint például :


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

Tudod mit csinál a kód $( ".result" ).html( data );? Próbáljunk kitalálni...

Megkeresi a dokumentumban az eredmény osztályú elemet, és HTML kódot ad bele - data data. Így pár sorban letöltheti az adatokat a szerverről és hozzáadhatja az oldalához. Hát nem gyönyörűség? :)

A GET kérés néhány sorban is írható:


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

Szeretne letölteni és végrehajtani egy szkriptet?


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

Szerezd meg a legújabb HTML oldalt?


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

Van néhány nagyon jó jQuery dokumentáció az interneten:

jQuery API

jQuery.ajax()

Ezenkívül az összes gyakori kérdés könnyen megtalálható a Google-on, és a StackOverflow-n található.