JavaScript POST
-
Verwenden Sie
XHR(XML HTTP Request)
, umPOST
-Daten ohne Formular in JavaScript zu senden -
Verwenden Sie die API
Abrufen
, umPOST
-Daten ohne Formular in JavaScript zu senden -
Verwendung von
Navigator.sendBeacon()
zum Senden vonPOST
-Daten ohne Formular in JavaScript
![JavaScript POST](/img/JavaScript/ag-feature-image---post-without-form-javascript.webp)
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 hat3
Eigenschaften:method
: Gibt die Methode wieGET
,POST
usw. an. In diesem Fall sollte der WertPOST
sein, da wir einePOST
-Anforderung stellen.body
: Das Objektbody
enthält die zu sendenden Daten.header
: Dies ist ein optionaler Parameter, mit dem wir verschiedene Aktionen fürHTTP
-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);
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn