So schreiben Sie die Einreichung eines Beitrags in Javascript

In der Front-End-Entwicklung müssen wir häufig die AJAX-Technologie verwenden, um HTTP-Anfragen, einschließlich POST-Anfragen, zu senden. In diesem Artikel wird erläutert, wie Sie eine POST-Anfrage in JavaScript schreiben.

1. Grundkonzepte von POST-Anfragen

Zunächst müssen wir die Grundkonzepte von POST-Anfragen verstehen.

Im HTTP-Protokoll sind GET und POST häufig verwendete Anfragemethoden. Der Hauptunterschied besteht darin:

1. Die GET-Anfrage übergibt die Parameter direkt in der URL, während die POST-Anfrage die Parameter in den Anfragetext einfügt.
2. GET-Anfragen übertragen eine kleine Datenmenge, im Allgemeinen nicht mehr als 1 KB, während POST-Anfragen keine Begrenzung haben und große Datenmengen übertragen können.
3. GET-Anfragen sind unsicher, da die Parameter in der URL vom Benutzer angezeigt oder geändert werden können, während POST-Anfragen relativ sicher sind, da die Parameter im Anfragetext platziert sind.

Das Obige ist das Grundkonzept der POST-Anfrage. Als Nächstes stellen wir vor, wie man eine POST-Anfrage in JavaScript schreibt.

2. Verwenden Sie das XMLHttpRequest-Objekt, um POST-Anfragen zu senden.

In JavaScript können wir das XMLHttpRequest-Objekt verwenden, um HTTP-Anfragen zu senden, einschließlich GET- und POST-Anfragen.

Das XMLHttpRequest-Objekt ist eine JavaScript-API, mit der im Hintergrund Daten mit dem Server ausgetauscht werden können. Es kann Daten asynchron über die AJAX-Technologie laden und die Seite aktualisieren, ohne die gesamte Seite neu laden zu müssen.

Hier sind die grundlegenden Schritte zum Senden einer POST-Anfrage mit dem XMLHttpRequest-Objekt:

1. Erstellen eines XMLHttpRequest-Objekts

Zuerst müssen wir ein XMLHttpRequest-Objekt erstellen. Dies kann mit dem folgenden Code erreicht werden:

var xhr = new XMLHttpRequest();

2. Legen Sie den Pfad und die Parameter der Anfrage fest

Als nächstes müssen wir den Pfad und die Parameter der Anfrage festlegen. Diese Parameter werden im Anforderungstext platziert. Dies kann mit dem folgenden Code erreicht werden:

xhr.open('POST', 'http://example.com/api', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=25');

Im obigen Code legen wir den Anforderungspfad auf http://example.com/api fest und die Parameter lauten name=John und age=25.

Darüber hinaus ist auch der Request-Header Content-type auf application/x-www-form-urlencoded gesetzt. Dies ist ein standardmäßiger POST-Anforderungsheader, der dem Server mitteilt, dass die Parameter im Anforderungstext im Schlüsselwertformat vorliegen.

3. Empfangen Sie die vom Server zurückgegebenen Daten.

Schließlich müssen wir die vom Server zurückgegebenen Daten empfangen. Dies kann mit dem folgenden Code erreicht werden:

xhr.onreadystatechange = function() {
  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

Im obigen Code legen wir den onreadystatechange-Ereignishandler von XMLHttpRequest fest. Wenn readyState 4 wird (d. h. die Anforderung ist abgeschlossen) und der Statuscode 200 ist, bedeutet dies, dass der Server erfolgreich geantwortet und die Daten zurückgegeben hat. Zu diesem Zeitpunkt können die vom Server zurückgegebenen Daten über xhr.responseText abgerufen werden.

3. Verwenden Sie die Abruf-API, um eine POST-Anfrage zu senden.

Zusätzlich zum XMLHttpRequest-Objekt können Sie auch die Abruf-API verwenden, um eine POST-Anfrage zu senden. Die Fetch-API ist eine Standard-JavaScript-API zum Senden von HTTP-Anfragen zwischen dem Client und dem Server und zum Kapseln der Serverantwort mithilfe eines Promise-Objekts.

Hier sind die grundlegenden Schritte zum Senden einer POST-Anfrage mithilfe der Abruf-API:

1. Legen Sie den Pfad und die Parameter der Anfrage fest.

Zuerst müssen wir den Pfad und die Parameter der Anfrage festlegen. Dies kann mit dem folgenden Code erreicht werden:

fetch('http://example.com/api', {
  method: 'POST',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded'
  },
  body: 'name=John&age=25'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Im obigen Code legen wir den Anforderungspfad auf http://example.com/api fest und die Parameter lauten name=John und age=25.

Darüber hinaus ist auch der Request-Header Content-type auf application/x-www-form-urlencoded gesetzt. Dies ist ein Standard-POST-Anfrageheader, der dem Server mitteilt, dass die Parameter im Anfragetext im Schlüsselwertformat vorliegen.

2. Empfangen Sie die vom Server zurückgegebenen Daten.

Schließlich müssen wir die vom Server zurückgegebenen Daten empfangen. Sie können das Promise-Objekt der Fetch-API verwenden, um damit umzugehen. Dies kann mit dem folgenden Code erreicht werden:

.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Im obigen Code verwenden wir die Methode „response.json()“, um den Antworttext in das JSON-Format zu konvertieren, die Antwortdaten über die Methode „then()“ zu verarbeiten und Ausnahmen zu behandeln die Catch()-Methode.

4. Zusammenfassung

Mithilfe der in diesem Artikel vorgestellten Methoden können wir POST-Anfragen in JavaScript schreiben, einschließlich der Verwendung des XMLHttpRequest-Objekts und der Fetch-API. Diese Methoden können Daten asynchron laden und die Seite aktualisieren, ohne die gesamte Seite neu laden zu müssen. Sie können die geeignete Methode zum Senden von POST-Anfragen basierend auf den tatsächlichen Anforderungen auswählen.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie die Einreichung eines Beitrags in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!