Peticiones AJAX a PHP con jQuery

Enviando un formulario por AJAX sin recargar la página

Las peticiones AJAX PHP nos permite enviar información mediante $_POST  o $_GET  a PHP sin necesidad de recargar la página, dando así mayor comodidad al usuario. En este caso, para facilitar las cosas utilizaremos la famosa librería jQuery.

Ventajas de usar AJAX

  • Ahorrar transferencia

Bien utilizadas, las peticiones AJAX nos van a permitir ahorrar ancho de banda en nuestra web ya que nos permitirá enviar solo la respuesta del formulario sin tener que procesar otra vez la web completa.

  • Mayor velocidad

De la misma manera de la que nos va a permitir ahorrar ancho de banda, al no enviar de nuevo todo el contenido de la página conseguiremos aumentar la velocidad del envío a PHP.

  • Mayor comodidad

Para un usuario, especialmente para los que tengan un Internet lento, es más dinámico y más cómodo poder realizar una acción en un sitio web sin tener que recargar la página.

Código del lado del cliente

Lo primero para hacer una petición AJAX es realizar el código del lado del cliente, en este caso un formulario. Para ello seguiremos los siguientes pasos:

Instalado jQuery

Lo primero que debemos hacer añadir jQuery a nuestro código añadiendo esta linea entre las etiquetas <head></head>.

Si queremos evitar tener que hacer peticiones externas para cargar la página web también podemos descargar el archivo en nuestro servidor e incluirlo localmente, así:

Creando el formulario

Después de instalar jQuery debemos crear el formulario, en mi caso será un formulario con un campo de email y un campo de texto, con la diferencia de que en action="" debemos poner una función Javascript. Por ejemplo:

Enviando el formulario

Ahora que ya tenemos creado el formulario, debemos crear la función que nos permita enviarlo. Esta es la parte más importante, por que aquí es donde se realiza la petición AJAX.

Creamos la función

Obtenemos los datos introducidos

Realizamos la petición AJAX

Establecemos la URL

Establecemos los datos a enviar:

Establecemos el método

Por lo general es o POST GET. En este caso usaremos POST.

Recoger resultados

Para recoger la respuesta de PHP usaremos el evento done. En este caso comprobaremos si el comentario ha sido insertado correctamente y lo añadiremos a la página, o si por el contrario ha ocurrido un error:

En ese código, la variable respuesta contiene lo que devuelve el archivo PHP.

Por lo tanto, nuestro código completo quedaría así:

 

Código del lado del servidor (PHP)

Ahora nos falta el archivo PHP que procese la información enviada por AJAX. En este caso, cogeremos la información introducida por el usuario, la validaremos y la insertaremos en la base de datos.

Lo primero es conectarse a la base de datos:

 

Ahora limpiaremos las variables para protegernos de ataques XSS y SQLi:

 

Y por último insertaremos el comentario en la base de datos:

¡Y listo,  con eso ya tendríamos nuestro formulario AJAX funcionando!

Como siempre les dejo los archivos del ejemplo para descargar para que los puedan probar ustedes mismos:

https://drive.google.com/open?id=0B1Tle40_yEIObm5nNk92Q28zSWs

Deja un comentario

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