Formular mit POST-Anfrage in JavaScript senden

Erstellt: November-23, 2021

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.

Formular-Post in Javascript senden

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.

Formular posten in Javascript absenden - Ergebnis

Der obige Code funktioniert genauso wie der vorherige Code, ist jedoch viel prägnanter und lesbarer.