JavaScript POST

1. Verwenden Sie XHR(XML HTTP Request), um POST-Daten ohne Formular in JavaScript zu senden
2. Verwenden Sie die API Abrufen, um POST-Daten ohne Formular in JavaScript zu senden
3. Verwendung von Navigator.sendBeacon() zum Senden von POST-Daten ohne Formular in JavaScript

In diesem Tutorial erfahren Sie, wie Sie Postdaten senden, ohne ein Formular in JavaScript zu verwenden.

Verwenden Sie XHR(XML HTTP Request), um POST-Daten ohne Formular in JavaScript zu senden

XHR ist ein Objekt, mit dem HTTP-Anfragen in JavaScript gestellt werden. Es hilft, mit dem Server zu interagieren und die Daten zwischen dem Client und dem Server auszutauschen. Wir können Daten von einem Server abrufen, ohne die gesamte Seite zu aktualisieren. Benutzer können damit weiterarbeiten, indem sie nur einen Teil einer Seite stören. Wir können diese Methode verwenden, um POST-Daten ohne Verwendung eines Formulars zu senden.

const URL = 'delftstack.com'
var xhr = new XMLHttpRequest();
xhr.open('POST', URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({name: 'DelftStack'}));

Verwenden Sie die API Abrufen, um POST-Daten ohne Formular in JavaScript zu senden

JavaScript Fetch API hilft wie XHR beim Senden von HTTP-Anfragen an den Server. Aber XHR hat keine Versprechungen gemacht und zu unübersichtlichem und unreinem Code geführt. Um die Fetch-API zu verwenden, müssen wir die Methode fetch() aufrufen. Es akzeptiert die folgenden Parameter:

• URL: Die URL der API, von der Daten angefordert werden sollen.
• Ein Objekt: Es ist ein Objekt, das zusätzliche Eigenschaften für den Typ der gestellten Anforderung angibt. Es hat 3 Eigenschaften:
  • method: Gibt die Methode wie GET, POST usw. an. In diesem Fall sollte der Wert POST sein, da wir eine POST-Anforderung stellen.
  • body: Das Objekt body enthält die zu sendenden Daten.
  • header: Dies ist ein optionaler Parameter, mit dem wir verschiedene Aktionen für HTTP-Anforderungs- und -Antwortheader ausführen können.

Nach der Methode fetch() geben wir die Versprechensmethode then() und catch() an. Wenn das von fetch() zurückgegebene resolved aufgelöst wird, wird die in then() angegebene Funktion ausgeführt, andernfalls wird das promise rejected und die Funktion in catch() aufgerufen.

let data = {name: 'DelftStack'};
fetch('https://randomuser.me/api/?results=10', {
  method: 'POST',
  body: JSON.stringify(data)
}).then(res => {
  console.log('Promise resolved', res);
});

Verwendung von Navigator.sendBeacon() zum Senden von POST-Daten ohne Formular in JavaScript

Die Methode Navigator.sendBeacon() hilft, Daten über HTTP-Anfragen asynchron an einen Webserver zu senden. Ihre Hauptanwendung ist das Senden von Website-Analysedaten an den Server, aber sie kann auch zum Senden von POST-Daten verwendet werden.

let data = {name: 'DelftStack'};
navigator.sendBeacon('https://randomuser.me/api/?results=10', data);