Netværk med jQuery

9.1 $ objekt og ajax metode i jQuery

jQuery har også et særligt globalt objekt til at arbejde med netværket. Som du kan gætte, hedder det $. Ja, det er navnet. Men det er enkelt og bekvemt.

Lad os sige, at du vil sende en anmodning til en API i din JavaScript og behandle det modtagne svar. Dette kan gøres sådan:

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

Det er det, det er hele koden. $Vi kalder metoden på objektet ajax(), hvor vi sender objektet, der beskriver alt, hvad vi har brug for: både anmodningen og svaret.

• Feltet typeangiver typen af ​​HTTP-anmodning: GETellerPOST
• Feltet urlangiver url, hvortil anmodningen sendes.
• Feltet dataangiver anmodningsdataene i JSON-format
• Feltet succes angiver en funktion, der skal kaldes efter et vellykket svar fra serveren.

9.2 Nyttige forespørgsler

Men hvis du ikke behøver at overføre nogen data, kan anmodningen skrives endnu kortere. For eksempel kan du skrive en simpel POST-anmodning som denne :

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

Ved du hvad koden gør $( ".result" ).html( data );? Lad os prøve at gætte...

Den finder et element med resultatklassen i dokumentet og tilføjer HTML-kode inde i it - data data. Så på et par linjer kan du downloade data fra serveren og tilføje dem til din side. Jamen, er det ikke en skønhed? :)

En GET-anmodning kan også skrives på et par linjer:

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

Vil du downloade og udføre et script?

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

Få den seneste HTML-side?

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

Der er noget meget god jQuery-dokumentation på internettet:

jQuery API

jQuery.ajax()

Derudover er alle almindelige spørgsmål nemt at google og er på StackOverflow.