5

Tem como mostrar uma mensagem do tipo: "Carregando..." enquanto meu ajax faz a operação?

AJAX

              $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',                   
                success: function(data) {
                    console.log("sucesso");
                },
                error: function() {
                    console.log("erro");
                }   
              });

tipo, antes de entrar no success: function(data){} mostrar um loader ou uma msg

2 Respostas 2

10

Para além da resposta do Silvio, tens ainda outra forma válida de o fazer, usando o método beforeSend na requisição:

<div id="divCorpo"></div>

$.ajax({
    url: url,
    type: 'GET',
    dataType: 'json',  
    beforeSend: function () {
        //Aqui adicionas o loader
        $("#divCorpo").html("<img src='imagem_gif_carregando.gif'>");
    },         
    success: function(data) {
       console.log("sucesso");
    },
    error: function() {
        console.log("erro");
    }   
 });
2
  • @SilvioAndorinha, dá também uma vista de olhos nesta outra solução :) No entanto, a tua resposta também responde bem ao pedido! Commented 18/03/2015 às 17:51
  • 1
    Sim, verdade. Não conhecia esse beforeSend é que como sempre uso o $.post ao invés do $.ajax faço do primeiro modo, por no $.post não tem esse beforeSend +1 Commented 18/03/2015 às 18:00
6

Você pode fazer o seguinte:

 $("div").html("<img src='imagem_gif_carregando.gif'>");
   $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',                   
                success: function(data) {
                    $("div").html("Requisição concluída");
                    console.log("sucesso");
                },
                error: function() {
                    console.log("erro");
                }   
              });

Colocar uma imagem dentro de uma <div></div> antes de fazer a requisição

 $("div").html("<img src='imagem_gif_carregando.gif'>");

E depois que a requisição acabar remover a imagem da div

$("div").html("Requisição concluída");

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .