Display a Loader while processing ajax

Question

It can show 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");
                }   
              });

like, before entering the success: function(data){} show a downloader or an msg

Answer 1

In addition to Silvio’s answer, you have yet another valid way of doing so, using the method beforeSend in 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");
    }   
 });

Answer 2

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

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

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

And after the request has finished removing the image of the div

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