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
Hola, se que esta publicación es bastante antigua, pero estoy buscando algo como lo que posteaste, lo probé y tengo una pregunta, no me refresca la página al implementar tu código, pero me deja la página en blanco, sabráas ayudarme para que esto no pase?
Hola Federico, efectivamente hace ya 5 años del artículo. Para que puedas ver un ejemplo muy bueno de envío de formularios con Ajax y jQuery, te recomiendo este enlace:
http://josegoyo.github.io/2015-11-13-envio-ajax