Enviar un POST con Fetch API en JavaScript te permite mandar información desde un formulario al servidor sin recargar la página. Aquí verás cómo capturar los valores de un input, construir el objeto que viaja en el body y disparar la petición al hacer submit, todo con código limpio y verificable en la pestaña Network del navegador.
¿Cómo se construye la función createPost en JavaScript?
La idea es encapsular la lógica del envío en una función async que reciba el título y el contenido como parámetros, y que arme un objeto con la estructura que la API espera.
La estructura del post tiene tres campos: title, body y userId. El userId se genera de manera aleatoria con Math.random() para que el servidor reciba un identificador y no rompa el contrato de la API.
js
const userId = Math.random();
async function createPost(title, content) {
const post = {
title: title,
body: content,
userId: userId,
};
await fetchData({
method: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
data: post,
});
}
¿Qué es un POST en HTTP? Es el verbo que usas para enviar información al servidor. A diferencia de un GET, lleva un body con los datos que quieres crear o registrar.
¿Cómo capturar los valores del formulario sin recargar la página?
Cuando un botón tiene type="submit", el navegador recarga la página por defecto. Para evitarlo, escuchas el evento submit del formulario y llamas a event.preventDefault().
Después, accedes a los inputs usando event.currentTarget.querySelector con el id correspondiente y extraes su .value.
js
form.addEventListener('submit', (event) => {
event.preventDefault();
const title = event.currentTarget.querySelector('#title').value;
const content = event.currentTarget.querySelector('#content').value;
createPost(title, content);
});
Fíjate en el detalle: currentTarget apunta al formulario que disparó el evento, y desde ahí buscas los inputs por su id. Si olvidas el .value, recibes el nodo del DOM, no el texto que el usuario escribió.
¿Por qué usar event.preventDefault()? Porque cancela el comportamiento por defecto del submit, que es recargar la página. Sin esto, pierdes el control del flujo en JavaScript.
¿Cómo verificar la petición POST en la pestaña Network?
Abre las DevTools del navegador, ve a la pestaña Network y envía el formulario. Deberías ver una nueva entrada con el método POST y un código de estado 201 Created, que confirma que el recurso se creó correctamente.
Al abrir esa petición revisa tres cosas:
- Headers: el método usado, la URL destino y el código de estado.
- Payload: el JSON con
title, body y userId que enviaste.
- Response: la respuesta del servidor con el
id asignado al nuevo recurso.
Esto te da evidencia de que tu fetch viajó como POST, con el body correcto y que el servidor respondió. Si quieres que el userId sea un entero en lugar de un decimal, envuelve el Math.random() en Math.floor() y multiplícalo por el rango que necesites.
¿Qué significa el código 201 en una API? Que el servidor recibió tu POST y creó el recurso con éxito. Es la respuesta esperada cuando envías datos nuevos.
¿Qué pasa cuando hay un typo en querySelector?
Un error común es escribir mal el selector o el nombre de la propiedad. La consola te marca el error en la línea exacta, por ejemplo un target mal escrito o un id que no existe en el HTML.
La estrategia rápida es:
- Leer el mensaje de error y ubicar la línea.
- Verificar que el
id del input coincida con el selector.
- Confirmar que estás accediendo a
.value y no al elemento completo.
Con estos tres pasos resuelves la mayoría de fallos al capturar valores de un formulario.
¿Ya probaste enviar tu primer POST? Cuéntanos en los comentarios qué API estás usando y cómo te fue al revisar la pestaña Network.
