Vernetzung mit jQuery

9.1 $-Objekt und Ajax-Methode in jQuery

jQuery verfügt außerdem über ein spezielles globales Objekt für die Arbeit mit dem Netzwerk. Wie Sie sich vorstellen können, heißt es $. Ja, das ist der Name. Aber es ist einfach und bequem.

Angenommen, Sie möchten eine Anfrage an eine API in Ihrem JavaScript senden und die empfangene Antwort verarbeiten. Dies kann folgendermaßen erfolgen:

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

Das ist es, das ist der ganze Code. $Wir rufen die Methode für das Objekt ajax()auf, wobei wir das Objekt übergeben, das alles beschreibt, was wir brauchen: sowohl die Anfrage als auch die Antwort.

• Das Feld typegibt den Typ der HTTP-Anfrage an: GEToderPOST
• Das Feld urlgibt an url, an wen die Anfrage gesendet wird.
• Das Feld datagibt die Anforderungsdaten im JSON-Format an
• Das Erfolgsfeld gibt eine Funktion an, die nach einer erfolgreichen Antwort vom Server aufgerufen werden soll.

9.2 Nützliche Abfragen

Wenn Sie jedoch keine Daten übertragen müssen, kann die Anfrage auch kürzer geschrieben werden. Sie können beispielsweise eine einfache POST-Anfrage wie folgt schreiben :

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

Wissen Sie, was der Code bewirkt $( ".result" ).html( data );? Versuchen wir zu erraten...

Es findet ein Element mit der Ergebnisklasse im Dokument und fügt darin HTML-Code hinzu – data data. So können Sie in wenigen Zeilen Daten vom Server herunterladen und Ihrer Seite hinzufügen. Nun, ist es nicht eine Schönheit? :) :)

Eine GET-Anfrage kann auch in ein paar Zeilen geschrieben werden:

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

Möchten Sie ein Skript herunterladen und ausführen?

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

Holen Sie sich die neueste HTML-Seite?

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

Es gibt einige sehr gute jQuery-Dokumentation im Internet:

jQuery-API

jQuery.ajax()

Darüber hinaus sind alle häufig gestellten Fragen einfach zu googeln und auf StackOverflow zu finden.