1

estoy desarrollando una web y tengo ciertas consultas a la base de datos que me devuelven muchos datos, por ejemplo hay alguna con casi 10000 datos, pero no soy capaz de poner un spinner girando o un mensaje en pantalla diciendo que la web esta cargando, un ejemplo de como estoy haciendo esta consulta en mi servidor es de la siguiente manera:

app.get('/fincas', login, (req, res) => {
    let token = req.session.usuario.token

    let fincasDB = async() => {
        await sql.connect(config);
        let db = new sql.Request();
        db.input("token", sql.VarChar('100'), token);
        let result = await db.execute('LISTADO_CONSULTA_FINCAS');
        return result.recordset;
    }

    fincasDB().then(fincas => {
        console.log(fincas);
        res.render('fincas.hbs', { fincas: fincas });
    }).catch(err => {
        console.log('error al sacar las fincas', err);
        return res.status(404).redirect('/404');
    });

});

y el ejemplo de mi frontend sería este:

 let nombreDeUsuario = async() => {
        let nombre = await $.ajax({
            type: "POST",
            url: "/nombreUsuario",
            data: "",
            success: function(datosUsuario) {
                let usuario = datosUsuario.usuario
                return usuario;
            }
        });

        return nombre;
    }

    nombreDeUsuario().then(usuario => {
        $('#nombreUsuarioAside').text(usuario.nombre);
        $('.editarPerfil').click(function() {
            location.href = `/editarUsuario?id=${usuario.idUsuario}`;

        });

    }).catch(err => {
        alert('Ha ocurrido un error');
        location.href = "/";
    });

Son dos funciones diferentes que no tienen nada que ver, porque las fincas las saco por get, pero no se como poner mensajes cuando hago la consulta por ajax o cuando la hago por get, Alguien sabe como podría hacerlo? muchas gracias

2 respuestas 2

1

Puedes usar la propiedad beforeSend que te permite ejecutar código antes de iniciar la petición, por lo cual podrías mostrar un mensaje de carga y esconderlo cuando haya acabado en el success.

Por ejemplo:

let nombreDeUsuario = async () => {

    let nombre = await $.ajax({
        type: "get",
        url: "https://jsonplaceholder.typicode.com/todos/1",
        data: "",
        beforeSend: function() {
            //Mostrar el loading
            $("#loading").show();
        },
        success: function(datos) {
            //Cuando hemos acabado, quitamos el loading
            $("#loading").hide();
            console.log("Done");
            return datos;
        }
    });

    return nombre;
}

nombreDeUsuario();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <h2 id="loading"style="display:none">Loading...</h2>

Depende de tu velocidad el cargar se mostrara más tiempo o menos.

1

Yo lo que suelo hacer es obtener un gif de un loader, creo un div con este loader:

<div id="loader" style="display: none">
    <img src="img/loader.gif" alt="loader">
</div>

Con CSS aplicas el siguiete estilo:

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #FFFFFF;
  z-index: 9;
  opacity: 0.7;
  display:flex;
  justify-content:center;
  align-items:center;
}

Antes de iniciar la petición ajax, ejecutas $('#loader').fadeIn(); y al terminar, tanto en success como en error ejecutas ('#loader').fadeOut();

Si no quieres un loader, puedes poner el mensaje, mientras dure la petición, no se va a poder interactuar con tu página

2
  • Pero si tengo 10000 datos, la web me tarda unos 5 minutos en cargar los datos, como puedo hacer que me pinte los datos de forma paginada? para que no se me queden cargando los datos durante 5 minutos e ir viendo los datos de forma correcta poco a poco
    – Héctor
    el 13 oct. 2020 a las 8:21
  • Al ser una petición asíncrona, hasta que esta no termine no vas a poder ver los resultados
    – angogi
    el 13 oct. 2020 a las 10:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.