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.
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