Cómo enviar un formulario usando jQuery Ajax ($.ajax)

Enviar un formulario mediante el método $.ajax de jQuery es una forma eficaz de enviar datos al servidor sin recargar la página. Este enfoque mejora la experiencia del usuario y permite interacciones más dinámicas. Puedes gestionar el envío de formularios de diversas maneras, ya sea serializando el formulario completo o recopilando manualmente los valores de entrada.

Ejemplo 1: Uso de serialize()

La función serialize() codifica automáticamente todos los campos del formulario en formato de cadena de consulta. Así es como se usa:

HTML

<form id="myForm">
  <input type="text" name="username" />
  <input type="email" name="email" />
  <button type="submit">Send</button>
</form>

JavaScript

$('#myForm').on('submit', function(ev) {
    ev.preventDefault(); // prevent default form submit
    $.ajax({
      type: 'POST',
      url: '/submit.php',
      data: $(this).serialize(),
    }).done(function(response){
      console.log('Server response:', response);
    }).fail(function(){
      console.log('Submission failed.');
    });
});

En este caso, todas las entradas del formulario se recopilan automáticamente y se envían mediante POST.

Ejemplo 2: Recopilación manual de datos del formulario

Si necesita más control (por ejemplo, procesamiento personalizado o exclusión de campos), puede crear el objeto de datos usted mismo:

JavaScript

$('#myForm').on('submit', function(ev) {
    ev.preventDefault(); // prevent default form submit

    const formData = {
      username: $('input[name="username"]').val(),
      email: $('input[name="email"]').val()
    };

    $.ajax({
      type: 'POST',
      url: '/submit.php',
      data: formData,
    }).done(function(response){
      console.log('Server response:', response);
    }).fail(function(){
      console.log('Submission failed.');
    });
});

Con este método, puede preprocesar los datos antes de enviarlos.

Conclusión

Ambas técnicas son efectivas y dependen de sus necesidades. Utilice serialize() para formularios simples y el método manual cuando necesite más flexibilidad. $.ajax de jQuery hace que la gestión de formularios sea más limpia e interactiva, especialmente para aplicaciones web modernas.