Nätverk med jQuery

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 typeanger typen av HTTP-begäran: GETellerPOST
• Fältet urlanger urltill vilken begäran ska skickas.
• Fältet dataanger 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:

jQuery API

jQuery.ajax()

Dessutom googlas alla vanliga frågor enkelt och finns på StackOverflow.