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

jQuery – Cómo seleccionar una opción de Sele... Ya vimos en artículos anteriores cómo seleccionar una opción de un desplegable (select) por su valor. En este artículo vamos a ver cómo seleccionarlo ...
Validar un formulario con jQuery antes de enviarlo Una de las funciones que le dan un perfil mas profesional a nuestra web, es la validación de los formularios, antes de enviarlos. Una opción es enviar...
Efectos de animación con jQuery Aquí os dejo algunos enlaces de efectos de animación que pueden realizarse con la librería jQuery: Glimmer - Animación Free Style  Blend - Anima...
FancyBox como alternativa a LightBox La mayoría de vosotros ya conocerá LightBox como una de las librerías JavaScript mas famosas para crear atractivas galerías de fotos con sus respectiv...

2 comentarios

Deja un comentario

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

*