En este post te mostraré a traer datos desde PHP usando AJAX. En el primer ejemplo veremos cómo inyectar una página web (fragmento de HTML) a través de AJAX.
Dentro del segundo ejemplo veremos cómo traer datos JSON desde PHP de igual manera usando AJAX.
Veamos el primer ejemplo de traer datos con AJAX usando JavaScript, desde un servidor PHP. Lo que haremos será traer un fragmento de una página web o un componente, por ejemplo, un div con la información del usuario.
Estos componentes son reutilizables y permiten separar los datos. El servidor queda así:
<?php
// Definimos variables del perfil, obviamente
// estas deberían de venir de una base de datos o de la sesión
$nombre = "Luis Cabrera";
$apodo = "Parzibyte";
$sitioWeb = "https://parzibyte.me/blog";
?>
<p><strong>Nombre</strong>: <?php echo $nombre ?></p>
<p><strong>Apodo</strong>: <?php echo $apodo ?></p>
<p><strong>Sitio web</strong>: <a href="<?php echo $sitioWeb ?>">Visitar</a> </p>
Lo único que hacemos es renderizar unos párrafos con la información de un usuario (la misma podría venir de una base de datos, pero este es un ejemplo simple).
Si visitamos la página normalmente, se verá esto:
div en donde se va a inyectar el componente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ejemplo de AJAX con PHP</title>
</head>
<body>
<h1>Mi perfil</h1>
<button id="btnCargarPerfil">Cargar</button>
<div id="perfil"></div>
<script src="./script.js"></script>
</body>
</html>El componente en cuestión es un div con el id perfil. El mismo será cargado cuando se presione el botón de Cargar.
Veamos el script de JavaScript, que es el que realmente hace la llamada:
const $btnCargarPerfil = document.querySelector("#btnCargarPerfil"),
$perfil = document.querySelector("#perfil");
$btnCargarPerfil.addEventListener("click", () => {
fetch("./perfil.php")
.then(respuesta => respuesta.text())
.then(respuestaComoHTML => {
$perfil.innerHTML = respuestaComoHTML;
});
});Definimos nuestros elementos del DOM usando querySelector. La magia sucede en la línea 4 que es en donde hacemos una petición AJAX con JavaScript, solicitamos la página perfil.php previamente mostrada.
Cuando la promesa de fetch se resuelva decodificamos los datos como texto y luego colocamos la respuesta como innerHTML de nuestro div.
El resultado es:
Lo que se hace es:
No recomiendo mucho este método, pues es mejor regresar los datos como JSON o como un formato entendible por varios lenguajes.
Ahora veamos otro enfoque en donde simplemente necesitamos datos como JSON para luego mostrarlos con JavaScript.
Para traer algunos datos JSON con JavaScript y PHP comenzamos definiendo el script de PHP que se encargará de mostrar los datos como JSON.
Recuerda que en la vida real, los datos deberían venir de una base de datos pero aquí los pongo así para simplificar.
<?php
// Definimos variables del perfil, obviamente
// estas deberían de venir de una base de datos o de la sesión
$nombre = "Luis Cabrera";
$apodo = "Parzibyte";
$sitioWeb = "https://parzibyte.me/blog";
// Preparar el objeto que vamos a mostrar
$datos = [
"nombre" => $nombre,
"apodo" => $apodo,
"sitioWeb" => $sitioWeb,
];
// Mostrar codificadas como JSON
echo json_encode($datos);
En este caso estamos mostrando un objeto JSON, codificando la información con PHP. Esto podría ser un objeto, un arreglo, un arreglo de objetos o cualquier cosa.
Si visitamos la página veremos el JSON de nuestro objeto:
Eso es lo que va a consumir JavaScript, pero antes de eso veamos la vista. En este caso tenemos varios elementos que van a tener una pieza de información:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ejemplo de AJAX con PHP</title>
</head>
<body>
<h1>Mi perfil</h1>
<button id="btnCargarPerfil">Cargar</button>
<div>
<strong>Nombre: </strong><p id="nombre"></p>
<br>
<strong>Apodo: </strong><p id="apodo"></p>
<br>
<strong>Sitio web: </strong><p id="web"></p>
<br>
</div>
<script src="./script.js"></script>
</body>
</html>Tenemos 3 párrafos en donde volcaremos la información del objeto. Si a ti no te gusta estar definiendo párrafos, podrías dibujar los datos de manera dinámica. Veamos el script:
const $btnCargarPerfil = document.querySelector("#btnCargarPerfil"),
$perfil = document.querySelector("#perfil"),
$nombre = document.querySelector("#nombre"),
$apodo = document.querySelector("#apodo"),
$web = document.querySelector("#web");
$btnCargarPerfil.addEventListener("click", () => {
fetch("./perfil.php")
.then(respuesta => respuesta.json())
.then(perfil => {
// Aquí hacer algo con la respuesta
$nombre.textContent = perfil.nombre;
$apodo.textContent = perfil.apodo;
$web.textContent = perfil.sitioWeb;
});
});Hacemos una petición AJAX a PHP en la línea 7, pero ahora decodificamos como JSON automáticamente. Ahora en la resolución de la promesa tenemos el objeto perfil como un objeto de JavaScript; le colocamos el valor a cada elemento de la página web.
Esto es para ejemplificar, ya dije anteriormente que puedes usar los datos para otro tipo de cosas. Pero bueno, al ejecutar pasa esto:
No voy a explicar la diferencia entre los formatos, sino entre la carga de cada uno de ellos.
Cuando se sirve HTML, el mismo ya no se puede modificar de manera fácil y se obtiene junto, todo el fragmento. No puedes reutilizar o extraer un dato pequeño.
En cambio, si se sirve JSON, se puede acceder a datos más granulares y colocarlos en distintos lugares, además de que se pueden reutilizar. Otra ventaja es que otros lenguajes hablan JSON así que sería muy fácil armar una API que sea consumida con Java para Android, por ejemplo.
Así es como se hacen llamadas AJAX con JavaScript, a un servidor con PHP.
En próximos tutoriales traeré un ejemplo de un envío de formulario usando AJAX.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios
Te felicito, excelente explicación para principiantes :)
Muchas gracias!
Le invito a seguirme y compartir para que pueda seguir escribiendo contenido como este.
Saludos :)