En este artículo vamos a realizar un taller de envío de datos por POST, desde Javascript, con Ajax y usando Fetch API, que es el mecanismo más moderno y sencillo para realizar llamadas asíncronas desde Javascript.

Además, podrás conocer otro API muy útil de Javascript en los navegadores llamado FormData, que usaremos para construir objetos fácilmente a partir de los datos de un formulario.

Nuestro objetivo no es tanto explicar fetch desde cero, puesto que es un tema que ya hemos abordado anteriormente. Sino que queremos ver un caso concreto de uso de fetch que usaremos en el momento que queramos enviar datos por POST a un servidor web. No obstante, cabe señalar que la novedad principal de Fetch es la posibilidad de usar promesas, lo que simplifica bastante la operativa con las llamadas asíncronas. Para información básica sobre este API te recomendamos la lectura del artículo Fetch Ajax en Javascript.

Conociendo FormData

Lo primero que debes saber para enviar datos de formularios es recuperar la información escrita en los campos de uno de los formularios de la página. Para ello en Javascript disponemos de los objetos FormData.

FormData nos permite disponer de un objeto con todos los datos del formulario, con pares clave valor. Donde la clave es el "name" del campo de formulario y el valor es su propiedad "value".

Recibir todos los datos de un formulario es tan sencillo como ejecutar el constructor FormData, enviando como parámetro el objeto formulario que queremos usar para recuperar sus datos. Sería algo como esto:

const data = new FormData(document.getElementById('formulario'));

Como puedes ver, creamos un nuevo objeto FormData a partir del formulario con id "formulario". En la constante "data" tendremos entonces ese objeto FormData.

Enviar datos por POST con Fetch

Ahora ya podemos usar este objeto para enviar los datos por POST. Esta parte es muy sencilla, ya que simplemente tenemos que configurar el method como "POST" y pasar los datos en el body de la solicitud. Lo harías con un código como este:

fetch('../post.php', {
   method: 'POST',
   body: data
})

Recuerda que para que la solicitud se produzca tienes que escribir el "then" de la llamada fetch, pues hasta que no se haya definido qué se quiere hacer con la respuesta de la llamada Ajax, el navegador no realizará ninguna acción.

El código completo de nuestra llamada Ajax podría ser algo como esto:

const data = new FormData(document.getElementById('formulario'));
fetch('../post.php', {
   method: 'POST',
   body: data
})
.then(function(response) {
   if(response.ok) {
       return response.text()
   } else {
       throw "Error en la llamada Ajax";
   }

})
.then(function(texto) {
   console.log(texto);
})
.catch(function(err) {
   console.log(err);
});

Componer los datos del envío POST sin necesidad de un formulario

Podría ocurrirte que necesites enviar datos por POST pero que no dispongas de un formulario en la página donde el usuario haya escrito esos datos. Es decir, generar desde cero los datos del formulario, con variables o datos que tengas en Javascript.

Esto es perfectamente posible, aunque es algo más relativo al uso del objeto FormData que a la propia llamada Ajax con Fetch. Lo conseguimos mediante dos pasos.

1. Creamos un objeto FormData vacío, simplemente enviando al constructor FormData los paréntesis vacíos.
2. Creamos todos los datos arbitrarios con el método append() que recibe el dato que se quiere agregar al FormData, con su par clave/valor.

El código te quedará como puedes ver a continuación.

const data = new FormData();
data.append('empresa', 'DesarrolloWeb.com');
data.append('CIF', 'ESB00001111');
data.append('formacion_profesional', 'EscuelaIT');
fetch('../post.php', {
   method: 'POST',
   body: data
})
.then(function(response) {
   if(response.ok) {
       return response.text()
   } else {
       throw "Error en la llamada Ajax";
   }

})
.then(function(texto) {
   console.log(texto);
})
.catch(function(err) {
   console.log(err);
});

Como puedes ver, la parte del fetch no tiene ninguna variación con el ejemplo anterior. Solamente estamos creando el FormData vacío y agregando los datos mediante su método append(). Es tan sencillo como eso.

Construir los datos de envío con URLSearchParams

Otra alternativa posible es usar un objeto URLSearchParams, que nos servirá exactamente igual que FormData. La única diferencia constatable es el constructor.

const data = new URLSearchParams("nombre=miguel angel&nacionalidad=español");

Como puedes apreciar este constructor recibe todos los datos que quieras agregar, en formato URL, con pares clave/valor separados por el caracter "&".

Enviarlos lo puedes hacer del mismo modo que siempre:

fetch('../post.php', {
   method: 'POST',
   body: data
})

URLSearchParams también permite usar el método append() para agregar parámetros o valores a los datos que enviarás por POST. También es idéntico a lo que haces con FormData.

data.append('otroDato', 'otro valor');

Dejamos aquí el código completo de ejemplo con URLSearchParams, por si alguien se pierde, aunque es calcado a lo que habíamos visto anteriormente.

const data = new URLSearchParams("nombre=miguel angel&nacionalidad=español");
data.append('otroDato', 'otro valor');
fetch('../post.php', {
   method: 'POST',
   body: data
})
.then(function(response) {
   if(response.ok) {
       return response.text()
   } else {
       throw "Error en la llamada Ajax";
   }

})
.then(function(texto) {
   console.log(texto);
})
.catch(function(err) {
   console.log(err);
});

Conclusión

Esperamos que esta lista de alternativas te sirva para enviar datos por el método POST al servidor, usando el API de Fetch, que es la manera más moderna de trabajo con Ajax en Javascript.

Los datos en el servidor los recibirás por el método tradicional. Por ejemplo, en PHP usarías el array superglobal $_POST.

Solo un detalle más. Recuerda usar el Polyfill de fetch para asegurarte la compatibilidad con navegadores antiguos, si es que fuera necesario para tu proyecto.