0Pricing
jQuery Academy · Lección

Envío de formularios mediante AJAX y comentarios

Domine el envío asíncrono de datos de formularios mediante AJAX, proporcione comentarios en tiempo real al usuario y gestione las respuestas del servidor sin recargar toda la página para ofrecer una experiencia de usuario más fluida.

Envío de formularios mediante AJAX y comentarios es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.

Formularios fluidos con AJAX

¡Imagine enviar un formulario sin recargar toda la página! Esa es la magia del envío de formularios mediante AJAX.

En lugar de actualizar toda la página, AJAX permite enviar los datos del formulario a un servidor en segundo plano. Esto proporciona una experiencia de usuario mucho más fluida y rápida, perfecta para comentarios, registros o actualizaciones rápidas.

Detener el envío predeterminado

El primer paso al enviar un formulario mediante AJAX es impedir el comportamiento predeterminado del navegador. Si no lo hace, la página se recargará como de costumbre y se perderá el propósito de AJAX.

Lo conseguimos llamando a event.preventDefault() dentro del controlador de envío del formulario.

<form id="myForm">
  <label for="username">Name:</label>
  <input type="text" id="username" name="username" placeholder="Your name">
  <button type="submit">Submit</button>
</form>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#status').text("Form submission prevented!");
      console.log("Form submission prevented!");
    });
  });
</script>

Preparar los datos del formulario

Antes de enviar los datos del formulario mediante AJAX, debemos empaquetarlos correctamente. ¡El método .serialize() de jQuery es perfecto para ello!

  • Recopila automáticamente los valores de todos los elementos input, select y textarea del formulario.
  • Los codifica en una cadena codificada para URL (por ejemplo, name=Alice&email=alice%40example.com).
  • Esta cadena es el formato estándar para enviar datos de formularios a un servidor.
<form id="dataForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="Bob">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="bob@example.com">
  <button type="submit">Get Data</button>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#dataForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      $('#output').text("Serialized: " + formData);
      console.log(formData); // name=Bob&email=bob%40example.com
    });
  });
</script>

Enviar la solicitud AJAX

Una vez serializados los datos del formulario, ya podemos enviarlos al servidor. jQuery ofrece varios métodos AJAX, pero $.post() es un atajo práctico para enviar datos mediante el método HTTP POST.

Recibe la URL del servidor, los datos serializados y una función de devolución de llamada opcional que se ejecuta cuando la operación tiene éxito.

<form id="submitForm">
  <label for="msg">Message:</label>
  <input type="text" id="msg" name="message" value="Hello AJAX!">
  <button type="submit">Send</button>
</form>
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#submitForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      // Using a dummy API endpoint for demonstration
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#response').text("Success! Server ID: " + data.id);
        console.log("Server response:", data);
      });
    });
  });
</script>

Mostrar comentarios de carga

Cuando un usuario hace clic en el botón de envío, espera una respuesta inmediata. Como las solicitudes AJAX son asíncronas, se produce un retraso. ¡Proporcionar comentarios visuales es fundamental!

Puede mostrar un mensaje «Loading...» o un indicador de carga mientras la solicitud está en curso y ocultarlo cuando llegue la respuesta.

<style>
  #loading { display: none; color: gray; }
</style>
<form id="feedbackForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="New Widget">
  <button type="submit">Add</button>
</form>
<div id="loading">Loading...</div>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#feedbackForm').submit(function(event) {
      event.preventDefault();
      $('#loading').show(); // Show loading indicator
      $('#status').text(''); // Clear previous status
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#loading').hide(); // Hide loading
        $('#status').text("Item added with ID: " + data.id);
      });
    });
  });
</script>

Gestionar las respuestas correctas

Cuando el servidor procesa correctamente los datos del formulario, normalmente envía una respuesta. Esta puede ser un mensaje de confirmación, el ID de un registro recién creado o datos actualizados.

La función de devolución de llamada de éxito (el tercer argumento de $.post()) recibe estos datos, lo que le permite actualizar la interfaz de usuario en consecuencia.

<form id="addTodoForm">
  <label for="todoTitle">Todo:</label>
  <input type="text" id="todoTitle" name="title" placeholder="New todo item">
  <button type="submit">Add Todo</button>
</form>
<ul id="todoList"></ul>
<div id="message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#addTodoForm').submit(function(event) {
      event.preventDefault();
      $('#message').text('Adding...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/todos", formData, function(todo) {
        $('#message').text('Todo added!');
        $('#todoList').append('<li>' + todo.title + ' (ID: ' + todo.id + ')</li>');
        $('#addTodoForm')[0].reset(); // Clear form fields
      });
    });
  });
</script>

Gestionar los errores correctamente

No todas las solicitudes tienen éxito. Los problemas de red, los errores del servidor o los datos no válidos pueden hacer que una solicitud AJAX falle. Es fundamental gestionar estos errores correctamente e informar al usuario.

Con $.post(), puede encadenar un método .fail(). Con $.ajax(), puede usar la devolución de llamada error o el método .fail() del objeto Deferred devuelto.

<form id="errorForm">
  <label for="badData">Data:</label>
  <input type="text" id="badData" name="data" value="bad value">
  <button type="submit">Submit</button>
</form>
<div id="errorMessage" style="color: red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#errorForm').submit(function(event) {
      event.preventDefault();
      $('#errorMessage').text('');
      let formData = $(this).serialize();
      // Simulating an error by posting to a non-existent endpoint
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/nonexistent-endpoint", // Will cause a 404 error
        type: "POST",
        data: formData
      })
      .done(function(data) {
        $('#errorMessage').text("Unexpected success!");
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#errorMessage').text("Error: " + textStatus + " - " + errorThrown);
        console.error("AJAX Error:", textStatus, errorThrown);
      });
    });
  });
</script>

Vaciar los formularios después del envío

Después de enviar correctamente un formulario, es recomendable borrar los campos de entrada para ofrecer una buena experiencia de usuario. Esto evita envíos accidentales repetidos y deja el formulario listo para la siguiente acción.

Puede usar el método nativo del DOM .reset() en el elemento del formulario o borrar manualmente los valores de cada campo de entrada.

<form id="clearForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="Item A">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" value="1">
  <button type="submit">Add</button>
</form>
<div id="feedbackMsg" style="color: green;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#clearForm').submit(function(event) {
      event.preventDefault();
      $('#feedbackMsg').text('Submitting...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#feedbackMsg').text('Successfully added! ID: ' + data.id);
        $('#clearForm')[0].reset(); // Clears all form fields
      });
    });
  });
</script>

Ejemplo completo de un formulario AJAX

Combinemos todas las técnicas que hemos aprendido: impedir el envío predeterminado, serializar los datos, enviar la solicitud AJAX, mostrar comentarios de carga, gestionar las respuestas correctas y fallidas y, por último, vaciar el formulario.

Este enfoque integral garantiza una experiencia con formularios AJAX sólida y fácil de usar.

<style>
  #loader { display: none; color: blue; }
  #result { margin-top: 10px; font-weight: bold; }
</style>
<form id="fullAjaxForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Register</button>
</form>
<div id="loader">Processing...</div>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#fullAjaxForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#loader').show();    // Show loading indicator
      $('#result').text('');  // Clear previous results
      let formData = $(this).serialize(); // Serialize form data
      
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/users", // Dummy API endpoint
        type: "POST",
        data: formData,
        dataType: "json" // Expect JSON response
      })
      .done(function(response) {
        $('#result').css('color', 'green').text('Registration successful! ID: ' + response.id);
        $('#fullAjaxForm')[0].reset(); // Clear form fields
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#result').css('color', 'red').text('Registration failed: ' + textStatus);
        console.error("AJAX Error:", textStatus, errorThrown);
      })
      .always(function() {
        $('#loader').hide(); // Always hide loading indicator
      });
    });
  });
</script>

Compruebe sus conocimientos

Ha aprendido a enviar formularios con AJAX y a proporcionar comentarios en tiempo real. ¡Pongamos a prueba sus conocimientos!

Repaso: envíos de formularios fluidos

¡Enhorabuena! Ha aprendido a dominar el envío de formularios mediante AJAX, mejorando sus aplicaciones web con experiencias de usuario fluidas y no disruptivas.

  • Ha aprendido a impedir el comportamiento predeterminado de los formularios con event.preventDefault().
  • Ha usado .serialize() para preparar fácilmente los datos del formulario para su transmisión.
  • Ha implementado $.post() o $.ajax() para enviar datos de forma asíncrona.
  • Ha añadido comentarios esenciales en tiempo real para los estados de carga, éxito y error.
  • Por último, ha aprendido a vaciar los formularios después del envío para mantener una interfaz limpia.

Estas habilidades son esenciales para crear formularios web modernos y adaptables.

Preguntas frecuentes

¿La lección «Envío de formularios mediante AJAX y comentarios» es gratis?

Sí — el texto completo de «Envío de formularios mediante AJAX y comentarios» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Envío de formularios mediante AJAX y comentarios»?

Domine el envío asíncrono de datos de formularios mediante AJAX, proporcione comentarios en tiempo real al usuario y gestione las respuestas del servidor sin recargar toda la página para ofrecer una… Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar jQuery Academy?

No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.

¿Cuánto tiempo toma la lección «Envío de formularios mediante AJAX y comentarios»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?

Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Manipulación dinámica de campos de formulario
  2. Lógica de validación de formularios del lado del cliente
  3. Envío de formularios mediante AJAX y comentarios
← Volver a jQuery Academy