AJAX-POST-Anfrage in jQuery

Der heutige Beitrag wird etwas über AJAX POST-Anfragen in jQuery lehren.

AJAX POST Anfrage in jQuery

Die AJAX POST-Anforderung von jQuery führt eine asynchrone HTTP-Anforderung (AJAX) aus.

Syntax:

jQuery.ajax(url[, settings])
jQuery.ajax([settings])

1. URL ist die Zeichenfolge, die die URL enthält, an die die Anfrage gesendet wird.
2. settings sind die Schlüssel/Wert-Paar-Objekte, die die AJAX-Anfrage konfigurieren. Alle Einstellungen sind optional. Mit $.ajaxSetup() kann für jede Option ein Standardwert gesetzt werden.

Die Funktion $.ajax() liegt allen AJAX-Anfragen zugrunde, die über jQuery versendet werden. Es ist oft nutzlos, dieses Merkmal auf einmal aufzurufen, da zahlreiche übergeordnete Optionen wie $.Get() und .load() verfügbar und einfacher anzuwenden sind.

Alltägliche Optionen sind, wenn auch viel weniger, erforderlich, obwohl $.ajax() flexibler verwendet werden kann.

Das per $.ajax() zurückgelieferte Objekt jQuery XMLHttpRequest (jqXHR) ist ab jQuery 1.5 eine Obermenge des browserlokalen XMLHttpRequest-Elements. Es enthält beispielsweise die Häuser responseText und responseXML sowie eine getResponseHeader()-Technik.

Während der Bereitstellungsmechanismus etwas anderes als XMLHttpRequest ist (z. B. ein Skript-Tag für eine JSONP-Anforderung), simuliert das Element jqXHR die native XHR-Fähigkeit, wo dies möglich ist.

Ab jQuery 1.5.1 trägt das Objekt jqXHR zusätzlich die Methode overrideMimeType() (hat sich ebenfalls in jQuery 1.4.X geändert, ist aber in jQuery 1.5 kurzzeitig weggefallen). Beispielsweise kann die Technik .overrideMimeType() innerhalb der Callback-Funktion beforeSend() verwendet werden, um den Content-Type-Header der Antwort zu ändern.

Eindeutige Antworten auf $.Ajax()-Aufrufe werden bestimmten Arten der Vorverarbeitung unterzogen, bevor sie an den Success-Handler übergeben werden. Die verfügbaren Informationsarten sind text, HTML, XML, JSON, JSONP und script.

Die Datenoption kann die Daten entweder in einem Abfragestring der Form key1=value1&key2=value2 oder als Objekt der Form {key1: 'value1', key2: 'value2'} senden.

Aufgrund von Browser-Sicherheitseinschränkungen unterliegen die meisten AJAX-Anforderungen der Same-Origin-Coverage; die Anfrage kann Fakten von einer anderen Domäne, Subdomäne, einem anderen Port oder Protokoll nicht effizient abrufen.

Weitere Informationen finden Sie in der .ajax()-Dokumentation.

Lassen Sie es uns anhand des folgenden Beispiels verstehen. Die folgenden Codes können nicht unverändert ausgeführt werden und haben keine Ausgabe.

Es muss dem vorhandenen Code hinzugefügt werden, um die Ausgaben anzuzeigen.

<form id="myForm">
    <label for="name">Name</label>
    <input id="name" name="name" type="text" value="Smith" />
    <input type="submit" value="Send" />
</form>

$('#myForm').submit(function(event) {
  event.preventDefault();
  $.ajax({
     method: 'POST',
     url: '/open/hello-world',
     data: {name: 'Smith', location: 'Doe'}
   }).done(function(msg) {
    alert('Data Saved: ' + msg);
  });
})

Sobald der Benutzer das Formular im obigen Beispiel absendet, wird ein AJAX-Aufruf mit der angegebenen URL und den angegebenen Parametern an den Server gesendet. Wenn der Server mit einer erfolgreichen Nachricht zurückkehrt, können Sie die Nachricht auf der Konsole drucken oder den Benutzer mit der entsprechenden Nachricht benachrichtigen.