Como cargar Datos JSON con un Spinner en jQuery Ajax

4 minuto(s)

Demo Github

Los Spinners de carga son geniales, hay muchos estilos disponibles de manera gratuita o de pago en distintas plataformas de Internet o si deseas puedes crear tu propio Spinner haciendo uso de Photoshop (te toma mas tiempo), el Spinner lo podemos mostrar antes de cargar un determinado contenido en formato JSON, todo esto te enseñare como hacerlo en este Post.

Antes de continuar con este Post te invito a escuchar el Podcast: “Dominio del trabajo con Varios Lenguajes de Programación”:

Spotify	SoundCloud

Bien ahora continuemos con el Post: Como cargar Datos JSON con un Spinner en jQuery Ajax.

Si busca en Internet usando el término: Create Ajax Loading online o usando términos similares, te aparecerán muchas páginas webs o plataformas que te ayudan a crear una animación Spinner y la puedes descargar para usarla en tu proyecto.

Un Spinner es una animación en formato Gif que simula el efecto de estar Cargando los datos antes de mostrarse, los datos que necesites mostrar, pueden ser en el formato que desees, yo usaré el formato JSON que es un formato genial. Te recomiendo leer el artículo Tipos de Datos que podemos usar en JSON, para que conozcas los datos que podemos usar en JSON.

Yo usaré el siguiente Spinner para este Tutorial:

Este Spinner lo saque de la página http://ajaxloadingimages.net/ le aplique la opción fondo transparente y lo descargue, lo aguardo en un directorio que he creado llamado /img.

La página desde donde saque el Spinner puede dejar de estar en línea o continuar en línea, esto no depende de mi, si no de los Desarrolladores que dan soporte a esa página. Si no esta disponible existen muchas otras páginas u opciones para crear un Spinner.

Vista

En mi HTML o la vista de usuario final agregaré 2 elementos: un botón con el id obtenerDatos y un div con el id datos.


<button type="button" class="btn btn-primary" id="obtenerDatos">Obtener Datos</button> 

<div id="datos" class="mt-5"></div>

<button type="button" class="btn btn-primary" id="obtenerDatos">Obtener Datos</button>

Cada vez que presione el botón Obtener Datos, aparecerá la animación Spinner en el div con el id datos y una vez que la vista obtuvo los datos en formato JSON, estos datos se mostrarán en el div con el id datos y el Spinner desaparecerá.

Nota: Yo estoy usando la versión 1.9.1 de Jquery (min)


<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

Intente utilizar la versión jquery-3.3.1.slim.min.js la cual es la última versión de jQuery hasta la fecha de este Post y me generó un error referente a la función $ajax, esto es porque la versión min (minima) solo trae los métodos más importante de jQuery, pero puedes usar la versión completa, es decir https://code.jquery.com/jquery-3.3.1.js, yo uso la versión jquery-1.9.1.min.js para este tutorial, la cual si me trae la función $ajax y es suficiente al menos para este tutorial en el cual busco utilizar lo mínimo posible de jQuery, porque un archivo de jQuery muy pesado puede afectar la velocidad de carga de la página del proyecto.

jQuery Ajax

Al hacer clic en el botón con el id obtenerDatos que coloque en la vista, llamamos a la siguiente función Ajax, la cual hace llamado a un archivo llamado postres.json que se encuentra dentro de la carpeta json

En el código he colocado comentarios en donde explico que hacen las partes mas relevantes del código:


$('#obtenerDatos').click(function(e) {

    e.preventDefault();

    $.ajax({
            url: "json/postres.json", // Llamo al archivo JSON con los datos 
            type: "get",
            dataType: "json",
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                $('#datos').html("<img src='img/spinner.gif' />"); // Muestro el Spinner (Animación) 
            },
        })

        // Cuando la petición de los datos fue correcta, mediante el método 'done' imprimo los datos
        // en mi div #datos, utilizo una lista desordenada <ul></ul> 
        .done(function(data) {

            console.log(data);
            let datos = "<ul class='list-group'>";
            for (let i = 0; i < data.length; i++) {
                console.log(data[i].nombre);
                datos += "<li class='list-group-item'>" + data[i].nombre + "</li>";
            }
            datos += "</ul>"
            $('#datos').html(datos);

        })

        // Este método es para manejar algún error al obtener los datos 
        .fail(function(data) {
            //
        });

});

$('#obtenerDatos').click(function(e) {

e.preventDefault();

$.ajax({

url: "json/postres.json", // Llamo al archivo JSON con los datos

type: "get",

dataType: "json",

cache: false,

contentType: false,

processData: false,

beforeSend: function() {

$('#datos').html("<img src='img/spinner.gif' />"); // Muestro el Spinner (Animación)

})

// Cuando la petición de los datos fue correcta, mediante el método 'done' imprimo los datos

// en mi div #datos, utilizo una lista desordenada <ul></ul>

.done(function(data) {

console.log(data);

let datos = "<ul class='list-group'>";

for (let i = 0; i < data.length; i++) {

console.log(data[i].nombre);

datos += "<li class='list-group-item'>" + data[i].nombre + "</li>";

}

datos += "</ul>"

$('#datos').html(datos);

})

// Este método es para manejar algún error al obtener los datos

.fail(function(data) {

});

El archivo postres.json lo he subido al repositorio GitHub que esta al inicio de este Post, mientras más datos tenga el archivo JSON, obviamente tomara más tiempo en desaparecer la animación del Spinner.

Asimismo puedes ver el resultado final en la Demo que esta al inicio de este Tutorial.

Conclusión

Con jQuery se pueden hacer geniales cosas con tan poco código, podemos añadirle otras funcionalidades a nuestra llamada Ajax, esto queda a tu criterio o necesidad que tengas.

La mejor forma de dominar jQuery Ajax, es aplicándolo a tus proyectos.

Nota(s)

Los pasos y métodos utilizados en el código pueden ser eliminados (descontinuados), continuar o ser modificados, esto no dependen de mí si no de los Desarrolladores que dan soporte a jQuery.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenido.

jQuery Tutoriales
27-01-2020
14-02-2021
Crear un Post - Eventos Devs - Foro