Tips

Enviar formularios con AJAX y jQuery

Desde hace algún tiempo, las páginas web han ido evolucionando de modo que para enviar o recibir datos ya no es necesario que recarguemos todo el contenido, aligerando así el estrés de los servidores y reduciendo la cantidad de datos que se deben enviar al cliente.

Esta característica surge gracias a la tecnología que conocemos como AJAX, que no son más que las siglas de Asynchronous JavaScript And XML (JavaScript asíncrono y XML).

Resumiendo: AJAX nos permite realizar llamadas asíncronas al servidor donde está alojada la web.

En un principio AJAX podía parecer un poco engorroso con el manejo directo del XMLHttpRequest (objeto disponible en los navegadores actuales para realizar llamadas asíncronas), pero gracias a jQuery podemos simplificarlo todo en gran medida.

¡Vamos al lío!

Para enviar un formulario con AJAX y jQuery sin recargar toda la página, necesitaremos:

  • Formulario en HTML (formulario.html)
  • Gestor del formulario en PHP (sendform.php)
  • Gestor de llamadas asíncronas en JavaScript (async_form.js)
  • Librería jQuery (incluida en la cabecera de formulario.html)

A continuación os dejo el código comentado y listo para que hagáis vuestras pruebas:

Si abrimos el archivo formulario.html veremos cómo las respuestas enviadas por sendform.php se muestran en la página actual.

Las dudas que os surjan podéis ponerlas en los comentarios de este artículo.

Comentarios

Hola, soy el webmaster de TIC Las Palmas. ¿Quieres contactar conmigo? ¡Te ayudaré en lo que pueda!

Publicidad las 24 horas:
Si buscas promoción, una web es vital para obtener una mayor visibilidad.

Amplio alcance:
No existen barreras, accede al mercado internacional.

Fidelización:
Sus visitantes obtendrán feedback directo de usted o de su empresa.

Clientes potenciales:
Atraiga clientes que de otra manera no hubiesen encontrado sus servicios.

Valor añadido:
Agregue servicios adicionales a su negocio.

Ahorro:
Acabe con los gastos de promoción externa.

Formulario de consulta