Heim > Artikel > Web-Frontend > 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:
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:
Zuerst müssen wir ein XMLHttpRequest-Objekt erstellen. Dies kann mit dem folgenden Code erreicht werden:
var xhr = new XMLHttpRequest();
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.
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:
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.
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!