Cómo cargar y mostrar datos de un JSON con AJAX

En este artículo te enseñaré a cómo cargar y mostrar datos de un archivo JSON utilizando AJAX. Esta técnica es muy útil para crear animaciones con CSS dinámicamente en una página web. Si necesitamos mostrar datos de un JSON en nuestra página web, una forma común de hacerlo es mediante AJAX, la cual es una técnica que nos permite comunicarnos con el servidor de forma asíncrona, sin necesidad de recargar la página.

Para cargar datos de un JSON con AJAX, utilizaremos jQuery, una biblioteca de JavaScript muy popular que simplifica la manipulación del DOM y la comunicación con el servidor.

Paso 1: Crear un archivo JSON

Lo primero que debemos hacer es crear un archivo JSON con los datos que queremos mostrar en nuestra página. Por ejemplo, imaginemos que tenemos un archivo llamado datos.json con la siguiente estructura:

{
  "nombre": "Juan",
  "edad": 30,
  "ciudad": "Madrid"
}

Paso 2: Cargar datos con AJAX

Ahora, vamos a cargar estos datos en nuestra página web utilizando AJAX. A continuación, te mostraré un ejemplo de cómo hacerlo:

$.ajax({
    url: 'datos.json',
    dataType: 'json',
    success: function(data) {
        // Mostrar los datos en la página
        $('#nombre').text(data.nombre);
        $('#edad').text(data.edad);
        $('#ciudad').text(data.ciudad);
    }
});

En este código, utilizamos la función $.ajax de jQuery para hacer una petición al archivo JSON datos.json. Una vez que hemos obtenido los datos, los mostramos en la página utilizando jQuery para seleccionar los elementos correspondientes por su ID y cambiar su contenido con la función text().

Paso 3: Mostrar los datos en la página

Finalmente, para mostrar los datos en la página, necesitamos crear elementos HTML donde se mostrarán los datos. Por ejemplo, podemos tener un HTML como el siguiente:

<div>
    Nombre: <span id="nombre"></span><br>
    Edad: <span id="edad"></span><br>
    Ciudad: <span id="ciudad"></span>
</div>

Al cargar la página, los datos del archivo JSON se cargarán de forma dinámica y se mostrarán en los elementos correspondientes. ¡Así de sencillo es cargar y mostrar datos de un JSON con AJAX!

Es importante mencionar que para que este ejemplo funcione, o donde vayas a utilizar AJAX incluyas la versión de jquery más reciente, por CDN o descargando los archivos