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

Puesta en marcha con jQuery En primer lugar, debemos ir al web oficial de jQuery y descargarlo. Para quien no domine el tema, es un fichero .js que se puede descargar desde la pá...
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...
jQuery – Validar formulario antes de enviarl... Os dejamos un videotutorial que detalla cómo validar un formulario antes de enviarlo, mostrando al usuario qué error está cometiendo y en que campo. V...
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...