jQuery

AJAX, PHP y jQuery: carga de datos

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

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

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:

<?php
$nombre = "Luis";
$sitio = "parzibyte.me";
$html = "<h1>Nombre: $nombre</h1>";
# Concatenarle más cosas
$html .= "<p>Web: $sitio</p>";
# Finalmente lo imprimimos como HTML
echo $html;

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

<!doctype html>
<html lang="es">


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,
            shrink-to-fit=no">
        <meta name="description" content="AJAX con jQuery y PHP">
        <meta name="author" content="Parzibyte">
        <title>Traer datos de PHP usando jQuery y AJAX</title>
        <!-- Cargar el CSS de Boostrap-->
        <link href="bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <main role="main" class="container">
            <div class="row">
                <!-- Aquí pon las col-x necesarias, comienza tu contenido, etcétera -->
                <div class="col-12">
                    <h1>Petición AJAX GET con jQuery y PHP</h1>
                    <a href="//parzibyte.me/blog" target="_blank">By Parzibyte</a>
                    <br>
                    <button class="btn btn-success" id="btnCargarDatos">Traer datos</button>
                    <p id="respuesta"></p>
                </div>
            </div>
        </main>
        <script src="jquery-3.4.1.min.js"></script>
        <script src="script.js"></script>

    </body>

</html>

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í:

$(document).ready(
    function() {
        const $btnCargarDatos = $("#btnCargarDatos"),
            $respuesta = $("#respuesta");
        $btnCargarDatos.click(function() {
            $.get("./datos.php", function(datos) {
                $respuesta.html(datos);
            });
        });
    }
);

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:

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.

Cargar JSON usando AJAX jQuery PHP

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:

<?php
$nombres = ["Luis", "María", "Fernando", "Maggie"];

echo json_encode($nombres);

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.

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

<!doctype html>
<html lang="es">


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,
            shrink-to-fit=no">
        <meta name="description" content="AJAX con jQuery y PHP">
        <meta name="author" content="Parzibyte">
        <title>Traer datos de PHP usando jQuery y AJAX</title>
        <!-- Cargar el CSS de Boostrap-->
        <link href="bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <main role="main" class="container">
            <div class="row">
                <!-- Aquí pon las col-x necesarias, comienza tu contenido, etcétera -->
                <div class="col-12">
                    <h1>Petición AJAX GET con jQuery y PHP</h1>
                    <a href="//parzibyte.me/blog" target="_blank">By Parzibyte</a>
                    <br>
                    <button class="btn btn-success" id="btnCargarDatos">Traer datos</button>
                    <p id="respuesta"></p>
                </div>
            </div>
        </main>
        <script src="jquery-3.4.1.min.js"></script>
        <script src="script.js"></script>

    </body>

</html>

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

$(document).ready(
    function() {
        const $btnCargarDatos = $("#btnCargarDatos"),
            $respuesta = $("#respuesta");
        $btnCargarDatos.click(function() {
            $.get("./datos.php", function(nombresCodificados) {
                let nombres = JSON.parse(nombresCodificados);
                // Limpiar el contenedor por si ya tenía datos
                $respuesta.empty();
                // Cada nombre agregarlo usando forEach del arreglo
                // https://parzibyte.me/blog/2019/09/24/foreach-javascript-recorrer-arreglos/
                nombres.forEach(nombre => {
                    $respuesta.append(nombre + "<br>");
                });
            });
        });
    }
);

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:

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

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/