diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/08-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/08-Resumen.html" new file mode 100644--- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/08-Resumen.html" @@ -0,0 +1,166 @@ + + + + + + + Envío de Datos al Servidor con JavaScript y Fetch API + + + +
+
+

Resumen

¿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. +
  2. Prevenir comportamiento predeterminado: Usamos event.preventDefault() para evitar que la página se recargue al enviar el formulario.
    3. +
+
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. +
  2. Capturar datos ingresados: Accedemos a value del elemento para conseguir el texto ingresado por el usuario.
    3. +
+
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. +
  2. Estructurar los datos: Creamos un objeto con el título, contenido y userID.
    3. +
  3. Hacer la función async: Facilitamos la ejecución del fetch.
    4. +
+
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. +
  2. Incluir el cuerpo de la petición: Añadimos nuestro objeto de datos estructurado en JSON.
    3. +
+
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!

+
+
+ + \ No newline at end of file