Enviar formulario con solicitud POST en JavaScript
En JavaScript, puede realizar una solicitud POST con los formularios HTML. La publicación es un método utilizado en formularios HTML para enviar o enviar datos al servidor.
Envíe un formulario con una solicitud POST en JavaScript
El siguiente código le muestra cómo usar JavaScript para enviar un formulario en una solicitud POST. Aquí, crearemos una nueva solicitud de publicación y enviaremos al usuario a la nueva URL myPath.
Primero, hemos creado una función que toma la ruta de tres argumentos (la URL o el punto final), parámetros (un objeto con un par clave-valor), y el último es el método post que estamos inicializando directamente en el momento de la creación de la función.
Luego, usando el método document.createElement(), crearemos un elemento de formulario y lo almacenaremos dentro de la variable form. Luego inicializaremos este form.method con el método post y luego form.action con la ruta. Al final, agregaremos el formulario que hemos creado a la etiqueta body presente dentro del DOM.
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'});
En este punto, hemos creado y adjuntado el formulario al elemento del cuerpo y, actualmente, el formulario no contiene ningún elemento en su interior. Entonces, para agregar los datos dentro del formulario, usaremos el objeto parámetros, que estamos pasando a nuestra función sendData(). Para iterar sobre este objeto, usaremos un bucle for y tomaremos cada clave del objeto.
Luego crearemos un campo de formulario de input y lo almacenaremos dentro de la variable formField. Ahora configuraremos su tipo en hidden ya que no queremos mostrar este formulario dentro de nuestra página web. Por último, inicializaremos los campos del formulario parámetros name y value con la clave y el valor del objeto parámetros.
Dado que en nuestro caso, estamos pasando un objeto que contiene dos pares clave-valor; por lo tanto, el bucle for lo hará dos veces. Después de lo cual, usaremos el método submit() para realizar la solicitud de publicación y enviar al usuario a un punto final o URL diferente, es decir, myPath. La función sendData() se llama pasando estos parámetros sendData('/myPath/', {query: 'hello world', num: '1'});.
Si ejecuta el código anterior, realizará una solicitud POST y luego lo llevará a un nuevo punto final, como se muestra a continuación.
Una forma alternativa de hacer esto es creando el formulario completo dentro del propio HTML en lugar de JavaScript. Y luego acceder a este formulario y sus elementos dentro de nuestro código JavaScript de la siguiente manera.
<!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');
Aquí, estamos agregando directamente el method como POST al formulario HTML en sí. Dentro de nuestro método postData() simplemente pasamos la path, el name y el value como postData("https://www.google.com/","Writer","Jim Collins");. Luego accederemos al formField usando el método document.getElementById() y luego estableceremos los valores apropiadamente como se muestra arriba. Después de ejecutar este código, realizará una solicitud POST y llevará al usuario al sitio web de Wikipedia, como se muestra a continuación.
El código anterior funciona de la misma manera que el código anterior, pero es mucho más conciso y legible.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn