Display a loader while processing ajax

3

You can display a message like: "Loading ..." while my ajax does the operation?

AJAX

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

type, before entering success: function(data){} show loader or msg

    
asked by anonymous 18.03.2015 / 18:16

2 answers

6

You can do the following:

 $("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");
                }   
              });

Place an image inside a <div></div> before making the request

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

And after the request finishes removing the image from the div

$("div").html("Requisição concluída");
    
18.03.2015 / 18:18
8

In addition to Silvio's response, you still have another valid way to do this, using the beforeSend method on the request:

<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");
    }   
 });
    
18.03.2015 / 18:49