AJAX, PHP y jQuery si bien no están ligados, se relacionan para crear aplicaciones web dinámicas usando tecnologías libres.

En este post te mostraré cómo usar la librería jQuery para traer datos HTML y JSON desde PHP, todo eso sin refrescar la página.

Para ello haremos una petición HTTP GET usando el método $.get de jQuery; de este modo vamos a poder usar la técnica de AJAX usando jQuery y PHP.

¿jQuery en 2019?

Existen miles de mejores librerías y frameworks como Vue, React o Angular (aunque si me lo permites, te recomiendo Vue) que deberías usar en lugar de jQuery.

También puedes usar AJAX de manera nativa para obtener o enviar datos.

Hago este post para explicarte cómo usar AJAX y jQuery con PHP por si estás manteniendo un proyecto antiguo, pero si vas a comenzar uno nuevo, lo desaconsejo totalmente.

Pero bueno, al final es tu decisión, no me hagas caso y sigue leyendo.

El funcionamiento de $.get

La sintaxis básica para hacer una petición GET usando jQuery y el método get es:

$.get(ruta, función_que_maneja_respuesta);

Dentro de la función que maneja la respuesta vamos a recibir lo que sea que el servidor haya respondido. Puede ser un JSON, un HTML, o cualquier cosa.

En los ejemplos veremos cómo obtener un JSON con jQuery, y también cómo obtener HTML con jQuery. Te aviso que serán ejemplos muy simples y para principiantes.

AJAX, jQuery y PHP: Cargar HTML

AJAX con jQuery y PHP - Obtener HTML con get

Primero veamos el archivo PHP que se ejecuta del lado del servidor.

Relacionado:  Datos de sesión con fetch

Este archivo simplemente imprimirá algo de HTML que bien podría ser formado a partir de una base de datos; aunque en este ejemplo son datos estáticos que he puesto directamente en el código:

Ahora veamos el lado del cliente. Tenemos una página HTML que mostrará esos datos al hacer click en un botón:

Fíjate en el botón que tiene el id btnCargarDatos y en el párrafo que tiene el id respuesta. Estamos cargando también un script y la librería de jQuery.

El script se ve así:

Esperamos al famoso document ready y luego le agregamos un listener al botón. Cuando se hace click se invoca al método $.get que hará una petición AJAX al archivo datos.php

Como segundo argumento a $.get le pasamos una función que recibirá los datos y los colocará sobre el párrafo de respuesta, para ello invocamos al método html.

De este modo, el HTML que devuelva PHP a través de AJAX será colocado en el párrafo usando jQuery como se ve en la imagen:

AJAX con jQuery y PHP - Obtener HTML con get

Así es como logramos inyectar porciones de datos traídos usando AJAX y jQuery. En este caso se ve que la carga es instantánea porque la petición es a un servidor local.

Puedes probar el ejemplo aquí.

Cargar JSON usando AJAX jQuery PHP

Cargar JSON desde PHP usando jQuery y AJAX

Así como podemos traer un fragmento de código HTML podemos traer datos JSON que vamos a decodificar más tarde.

Nota: Recuerda que ya hablamos sobre JSON en PHP y JavaScript.

Comenzamos con el servidor:

Lo único que hacemos es definir un arreglo y codificarlo como JSON; recuerda que en la vida real esto podría venir de una base de datos, y que puede ser cualquier estructura de datos.

Relacionado:  Extraer información de archivos MP3 con PHP y Mp3Info

Ahora tenemos nuestra página HTML en donde cargamos el script y la librería de jQuery:

De hecho la vista no cambia, solo cambia el script:

Otra vez esperamos al document ready y agregamos el listener al botón. Cuando se hace click en el botón se hace una petición GET HTTP usando jQuery, invocando a datos.php.

Cuando tengamos la respuesta, la decodificamos como JSON. Al decodificarla se convertirá en un arreglo de JavaScript que podemos recorrer con forEach (más sobre forEach en JS aquí).

Dentro del forEach simplemente agregamos cada elemento de la lista al contenedor como se ve en la imagen:

Cargar JSON desde PHP usando jQuery y AJAX

Como ves, todo pasa en un instante. Al hacer click se obtienen los datos, se decodifican como arreglo, se recorren y finalmente se adjuntan al contenedor.

Finalmente puedes probar ese ejemplo aquí.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 577 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

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

A %d blogueros les gusta esto: