Enviar formulario con jQuery AJAX

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.
Para ello lo haremos con la ayuda de jQuery.

Por un lado tenemos el formulario

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

Por otro, el código que se encargar de enviar los datos del formulario a donde corresponde:

1
2
3
4
5
6
7
8
9
10
11
<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.

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.

Artículos relacionados

Primer contacto con jQuery Como indican en la web oficial, jQuery es una librería para JavaScript que facilita la programación en las tareas de eventos, crear animaciones y efec...
jQuery – Crear botón imágenes que cambian Veamos el código necesario para crear un enlace en forma de imagen, que al pasar el botón por encima (hover) cambia a otra imagen. Un ejemplo sería te...
jQuery UI – Tutorial 2 – Puesta en mar... Tutorial que muestra cómo poner en marcha la librería jQuery UI. Qué debo descargar, los termas predeterminados de jQuery UI, colocar la librería en n...
bideo.js – poner video en el fondo de página... Librería que permit de forma sencilla, poner un video como fondo en una página web. Es muy utilizado en páginas de inicio para intentar impactar al vi...

2 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*