Envío de Datos al Servidor con JavaScript y Fetch API

¿Cómo enviar información desde un formulario web sin refrescar la página?

Enviar datos de un formulario web sin que la página se recargue es un desafío común en el desarrollo front-end. Aquí exploramos cómo lograrlo utilizando JavaScript para manejar eventos del formulario, estructurar datos y enviarlos al servidor. ¡Acompáñame y lo descubriremos juntos!

¿Cómo prevenir el refresco de página en un formulario?

Un problema común al enviar formularios es que la página se actualiza, perdiendo datos temporales o interrumpiendo experiencia del usuario. Para evitarlo:

1. Escuchar el evento submit: Utilizamos addEventListener en el formulario para capturar cuando el usuario intenta enviar datos.
2. Prevenir comportamiento predeterminado: Usamos event.preventDefault() para evitar que la página se recargue al enviar el formulario.

form.addEventListener('submit', function(event) {
    event.preventDefault();
    // Código para manejar el formulario
});

¿Cómo capturamos los datos del formulario?

Una vez que el refresco está prevenido, necesitamos acceder a los valores del formulario:

1. Obtener los elementos del formulario: Usamos querySelector para encontrar elementos por su ID.
2. Capturar datos ingresados: Accedemos a value del elemento para conseguir el texto ingresado por el usuario.

const title = event.currentTarget.querySelector('#title').value;
const content = event.currentTarget.querySelector('#content').value;

¿Cómo estructurar y enviar un objeto de datos al servidor?

Antes de enviar los datos, debemos estructurarlos en un objeto que el servidor espera recibir:

1. Crear un User ID aleatorio: Generamos un número para simular un identificador de usuario.
2. Estructurar los datos: Creamos un objeto con el título, contenido y userID.
3. Hacer la función async: Facilitamos la ejecución del fetch.

async function createPost(title, content) {
   const userID = Math.floor(Math.random() * 1000);
   const post = {
      title,
      body: content,
      userId: userID
   };

   // Hacer un request al servidor
}

¿Cómo enviamos un request POST con fetch?

La clave es usar fetch para enviar un request POST con el objeto de datos:

1. Especificar método y URL: Definimos el método POST y apuntamos a la URL correcta.
2. Incluir el cuerpo de la petición: Añadimos nuestro objeto de datos estructurado en JSON.

async function createPostRequest(post) {
    const response = await fetch('URL_DEL_SERVIDOR', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(post)
    });
    
    if (response.ok) {
        console.log('Post creado exitosamente');
    } else {
        console.error('Error al crear el post');
    }
}

¿Cómo vinculamos el envío del formulario con nuestra función?

Finalmente, debemos ejecutar nuestra función de envío dentro del controlador de eventos del formulario.

form.addEventListener('submit', function(event) {
    event.preventDefault();
    const title = event.currentTarget.querySelector('#title').value;
    const content = event.currentTarget.querySelector('#content').value;
    createPostRequest({ title, content });
});

Y así, ¡tu formulario ahora envía datos al servidor sin recargar la página, utilizando JavaScript! Siguiendo estos pasos, mejoramos la experiencia del usuario y la eficiencia de nuestras aplicaciones web. No olvides persistir, experimentar y explorar nuevas posibilidades tecnológicas. ¡El futuro del desarrollo web está en tus manos!