Enviar formulario con jQuery AJAX

Publicada el por

Partimos de la premisa que tenemos un formulario creado, y queremos enviar los datos con AJAX. Dicho de otro modo, enviaremos el formulario sin marcharnos de la página. Empecemos con Enviar formulario con jQuery AJAX.

Por un lado, empezaremos con el código HTML5 que genera el formulario. Un ejemplo sería el siguiente código:

<form id="formularioaenviar" action="/destino.php" method="post">....</form>

Fijaos que le damos un identificador «formularioenviar» y el método de envío es post.

Por otro, el código jQuery que se encargar de enviar los datos del formulario a donde le hemos indicado en el action del formulario, destino.php:

<script type="text/javascript">
$('#formularioaenviar').submit(function (ev) {
  $.ajax({
    type: $('#formularioaenviar').attr('method'), 
    url: $('#formularioaenviar').attr('action'),
    data: $('#formularioaenviar').serialize(),
    success: function (data) { alert('Datos enviados !!!'); } 
  });
  ev.preventDefault();
});
</script>

De esta manera, se envía el formulario vía AJAX sin que salte de página.

  • Type: será POST, que es el que hemos indicado en formulario
  • Url: el action del formulario
  • data: Los datos a enviar (los campos del formulario)
  • Success: función que se ejecute cuando vuelva la respuesta de destino.php.

La función serialize(), convierte los campos del formulario con sus datos a un formato que se pueda enviar.
La función ev.preventDefault() evita la ejecución del submit del formulario.

Es un ejemplo muy sencillito que entre otras cosas no trata los datos que se devuelven, pero spero que os sea de utilidad el artículo Enviar formulario con jQuery AJAX

Más información