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 );
}
});
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ő
type
megadja a HTTP-kérés típusát:GET
vagyPOST
- A mező
url
megadja,url
hogy a kérés melyik címre kerüljön elküldésre. - A mező
data
megadja 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:
Ezenkívül az összes gyakori kérdés könnyen megtalálható a Google-on, és a StackOverflow-n található.