Formular mit POST-Anfrage in JavaScript senden
In JavaScript können Sie mit den HTML-Formularen eine POST-Anfrage durchführen. Der Post ist eine Methode, die in HTML-Formularen verwendet wird, um die Daten an den Server zu senden oder zu senden.
Senden ein Formular mit einer POST-Anfrage in JavaScript
Der folgende Code zeigt Ihnen, wie Sie JavaScript verwenden, um ein Formular in einer POST-Anfrage zu senden. Hier erstellen wir einen neuen Post Request und schicken den User an die neue URL myPath
.
Zuerst haben wir eine Funktion erstellt, die drei Argumente Pfad (die URL oder der Endpunkt), Parameter (ein Objekt mit einem Schlüssel-Wert-Paar) verwendet, und die letzte ist die Methode post
, die wir direkt zum Zeitpunkt der Funktion initialisieren Schaffung.
Dann erstellen wir mit der Methode document.createElement()
ein Formularelement und speichern es in der Variablen form
. Dann initialisieren wir diese form.method
mit der post-Methode und dann form.action
mit dem Pfad. Am Ende hängen wir das von uns erstellte Formular an das im DOM vorhandene body
-Tag an.
function sendData(path, parameters, method='post') {
const form = document.createElement('form');
form.method = method;
form.action = path;
document.body.appendChild(form);
for (const key in parameters) {
const formField = document.createElement('input');
formField.type = 'hidden';
formField.name = key;
formField.value = parameters[key];
form.appendChild(formField);
}
form.submit();
}
sendData('/myPath/', {query: 'hello world', num: '1'});
An dieser Stelle haben wir das Formular erstellt und an das body-Element angehängt, und derzeit enthält das Formular keine Elemente darin. Um die Daten innerhalb des Formulars hinzuzufügen, verwenden wir das Objekt parameters
, das wir an unsere Funktion sendData()
übergeben. Um über dieses Objekt zu iterieren, verwenden wir eine for-Schleife und nehmen jeden Schlüssel aus dem Objekt.
Dann erstellen wir ein Formularfeld input
und speichern es in der Variablen formField
. Jetzt setzen wir den Typ auf hidden
, da wir dieses Formular nicht auf unserer Webseite anzeigen möchten. Als letztes initialisieren wir die Formularfelder name
und Wert
mit dem Schlüssel und Wert des Objekts Parameter
.
Da wir in unserem Fall ein Objekt übergeben, das zwei Schlüssel-Wert-Paare enthält; Daher wird die for-Schleife zweimal ausgeführt. Danach verwenden wir die Methode submit()
, um die Post-Anfrage auszuführen und den Benutzer an einen anderen Endpunkt oder eine andere URL zu senden, z. B. myPath
. Die Funktion sendData()
wird durch Übergabe dieser Parameter aufgerufen sendData('/myPath/', {query: 'hello world', num: '1'});
.
Wenn Sie den obigen Code ausführen, stellt er eine POST-Anfrage und führt Sie dann zu einem neuen Endpunkt, wie unten gezeigt.
Eine alternative Möglichkeit, dies zu tun, besteht darin, das gesamte Formular innerhalb des HTML-Codes selbst anstelle von JavaScript zu erstellen. Und dann greifen Sie wie folgt auf dieses Formular und seine Elemente in unserem JavaScript-Code zu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form" action="https://www.wikipedia.org/" method="POST">
<input id="formField" type="hidden" name="Director" value="James Cameron">
</form>
<script src="./script.js"></script>
</body>
</html>
function postData(path, name, value){
document.getElementById("formField").name = name;
document.getElementById("formField").value = value;
document.getElementById("form").action = path;
document.getElementById("form").submit();
}
postData("https://www.wikipedia.org/","Writer","Jim Collins");
Hier fügen wir die method
direkt als POST
zum HTML-Formular selbst hinzu. In unserer Methode postData()
übergeben wir nur path
, name
und value
als postData("https://www.google.com/","Writer","Jim Collins");
. Dann greifen wir mit der Methode document.getElementById()
auf das formField
zu und setzen dann die Werte wie oben gezeigt entsprechend. Nachdem dieser Code ausgeführt wurde, führt er eine POST-Anfrage aus und leitet den Benutzer wie unten gezeigt zur Wikipedia-Website weiter.
Der obige Code funktioniert genauso wie der vorherige Code, ist jedoch viel prägnanter und lesbarer.