9.1 $-objekt och ajax-metod i jQuery
jQuery har också ett speciellt globalt objekt för att arbeta med nätverket. Som du kan gissa heter det $
. Ja, det är namnet. Men det är enkelt och bekvämt.
Låt oss säga att du vill skicka en begäran till ett API i ditt JavaScript och bearbeta det mottagna svaret. Detta kan göras så här:
$.ajax({
type: "POST",
url: "api.codegym.cc",
data: {name: 'Bill', location: 'Radmond'},
success: function(msg){
alert( "Person found: " + msg );
}
});
Det är det, det är all koden. $
Vi kallar metoden på objektet ajax()
, där vi skickar objektet som beskriver allt vi behöver: både förfrågan och svaret.
- Fältet
type
anger typen av HTTP-begäran:GET
ellerPOST
- Fältet
url
angerurl
till vilken begäran ska skickas. - Fältet
data
anger begäran om data i JSON-format - Framgångsfältet anger en funktion som ska anropas efter ett lyckat svar från servern.
9.2 Användbara frågor
Men om du inte behöver överföra några data, kan begäran skrivas ännu kortare. Till exempel kan du skriva en enkel POST-förfrågan så här :
$.post("ajax/test.html", function( data ) {
$( ".result" ).html( data );
});
Vet du vad koden gör $( ".result" ).html( data );
? Låt oss försöka gissa...
Den hittar ett element med resultatklassen i dokumentet och lägger till HTML-kod inuti it - data data
. Så på ett par rader kan du ladda ner data från servern och lägga till den på din sida. Tja, är det inte en skönhet? :)
En GET-förfrågan kan också skrivas på ett par rader:
$.get("ajax/test.html"., function( data ) {
$( ".result" ).html( data );
});
Vill du ladda ner och köra ett skript?
$.ajax({
method: "GET",
url: "test.js",
dataType: "script"
});
Få den senaste HTML-sidan?
$.ajax({
url: "test.html",
cache: false
})
.done(function( html ) {
$( "#results" ).append( html );
});
Det finns mycket bra jQuery-dokumentation på internet:
Dessutom googlas alla vanliga frågor enkelt och finns på StackOverflow.