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 – Tutorial 01 – Introducción Pequeño vídeo de unos 4 minutos que nos introduce a la librería jQuery. Qués es? Dónde informarse? Qué podemos hacer con esta librería? En el s...
jQuery – Seleccionar opción de un desplegabl... Si buscáis por internet cómo seleccionar valores de un desplegable con jQuery os saldran multitud de ejemplos en los que todo el mundod ice que les fu...
jQuery – Conseguir el valor href de un enlac... Para conseguir el valor de href en un enlace con jQuery utilizaremos el siguiente código: $(document).ready(function() { $("a").click(function...
jquery bootstrap TypeError: $(…) is null Que título mas raro para un post. Pues bien, detrás de él hay uno de los problemas que nos podemos encontrar al trabajar con jQuery y Bootstrap a la v...

2 comentarios

Deja un comentario

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

*