Mostra una barra di caricamento utilizzando jQuery mentre si effettua una richiesta AJAX

Question

sto facendo una richiesta AJAX con jQuery come:

$.get('/Stuff.php', function (data) { 
    $('#own').html(data); 
}); 

mentre questo dato è carico Voglio visualizzare un piccolo testo nella parte superiore della pagina (che dice solo "caricamento ...") senza bloccarlo.

come fare questo?

Answer 1

3nigma è sulla strada giusta, ma ha ottenuto un dettaglio sbagliato, almeno nel caso generale.

L'utilizzo di ajaxSetup fornisce solo valori predefiniti, se in seguito si effettuano alcune chiamate ajax che specificano le proprie richiamate per beforeSend (ovvero è necessario impostare alcune intestazioni specifiche) o complete (si desidera gestire sia il successo che l'errore lo stesso) sostituisci quelli di ajaxSetup e il tuo indicatore di caricamento si interromperà.

Invece, utilizzare Global Ajax Events (more about ajax events)

$(document).ajaxSend(function(e, jqXHR){ 
    //show the loading div here 
}); 
$(document).ajaxComplete(function(e, jqXHR){ 
    //remove the div here 
}); 

Si tratta di una soluzione più generica che non rompere, anche se altri codici vuole anche in modo da impostare alcuni beforeSend/gestori completi globali o locali o chiama ajaxSetup.

Answer 2

$("#loading").show(); //before send 
$.get('/Stuff.php', function (data) { 
    $('#own').html(data); 
    $("#loading").hide(); //when sucess 
}); 

Answer 3

utilizzare il ajaxSetup

$.ajaxSetup({ 
    beforeSend:function(xmlHttpRequest){ 
    //show the loading div here 
    }, 
    complete:function(){ 

    //remove the div here 
    } 
    }); 

ora rendono l'ajax chiamata

$.get('/Stuff.php', function (data) { 
    $('#own').html(data); 
}); 

Answer 4

È un uso beforeSend e complete la funzione di jQuery. In beforeSend visualizzi il tuo controllo e su complete lo nascondi.

Answer 5

semplice, basta completa così:

<style type="text/css"> 
#loadingbar { 
    position: fixed; 
    z-index: 2147483647; 
    top: 0; 
    left: -6px; 
    width: 1%; 
    height: 2px; 
    background: #b91f1f; 
    -moz-border-radius: 1px; 
    -webkit-border-radius: 1px; 
    border-radius: 1px; 
    -moz-transition: all 500ms ease-in-out; 
    -ms-transition: all 500ms ease-in-out; 
    -o-transition: all 500ms ease-in-out; 
    -webkit-transition: all 500ms ease-in-out; 
    transition: all 500ms ease-in-out; 
} 
#loadingbar.waiting dd, #loadingbar.waiting dt { 
    -moz-animation: pulse 2s ease-out 0s infinite; 
    -ms-animation: pulse 2s ease-out 0s infinite; 
    -o-animation: pulse 2s ease-out 0s infinite; 
    -webkit-animation: pulse 2s ease-out 0s infinite; 
    animation: pulse 2s ease-out 0s infinite; 
} 

#loadingbar dt { 
opacity: .6; 
width: 180px; 
right: -80px; 
clip: rect(-6px,90px,14px,-6px); 
} 

#loadingbar dd { 
    opacity: .6; 
    width: 20px; 
    right: 0; 
    clip: rect(-6px,22px,14px,10px); 
} 

#loadingbar dd, #loadingbar dt { 
    position: absolute; 
    top: 0; 
    height: 2px; 
    -moz-box-shadow: #b91f1f 1px 0 6px 1px; 
    -ms-box-shadow: #b91f1f 1px 0 6px 1px; 
    -webkit-box-shadow: #B91F1F 1px 0 6px 1px; 
    box-shadow: #B91F1F 1px 0 6px 1px; 
    -moz-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    border-radius: 100%; 
} 
</style> 


<script type="text/javascript"> 
$(document).ready(function() { 
    $.ajaxSetup({ 
     beforeSend:function(xmlHttpRequest){ 
      if ($("#loadingbar").length === 0) { 
        $("body").append("<div id='loadingbar'></div>") 
        $("#loadingbar").addClass("waiting").append($("<dt/><dd/>")); 
        $("#loadingbar").width((50 + Math.random() * 30) + "%"); 
      } 
        //show the loading div here 
     }, 
     complete:function(){ 
       $("#loadingbar").width("101%").delay(200).fadeOut(400, function() { 
         $(this).remove(); 
        }); 
     //remove the div here 
     } 
    }); 

}); 
</script> 

metterli alla tua pagina, e quando mai si effettuare chiamate ajax il caricamento mostrerà .. demo testato sul mio web: http://www.xaluan.com

Answer 6

Modello Bootstrap.

 var loadingPannel; 
     loadingPannel = loadingPannel || (function() { 
      var lpDialog = $("" + 
       "<div class='modal' id='lpDialog' data-backdrop='static' data-keyboard='false'>" + 
        "<div class='modal-dialog' >" + 
         "<div class='modal-content'>" + 
          "<div class='modal-header'><b>Processing...</b></div>" + 
          "<div class='modal-body'>" + 
           "<div class='progress'>" + 
            "<div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow='100' aria-valuemin='100' aria-valuemax='100' style='width:100%'> " + 
             "Please Wait..." + 
            "</div>" + 
            "</div>" + 
          "</div>" + 
         "</div>" + 
        "</div>" + 
       "</div>"); 
      return { 
       show: function() { 
        lpDialog.modal('show'); 
       }, 
       hide: function() { 
        lpDialog.modal('hide'); 
       }, 

      }; 
     })(); 

Ajax chiamata

    $.ajax({ 
         url: "/", 
         type: "POST", 
         data: responseDetails, 
         dataType: "json", 
         traditional: true, 
         contentType: "application/json; charset=utf-8", 

         beforeSend: function() { 

          loadingPannel.show(); 

         }, 
         complete: function() { 

          loadingPannel.hide(); 
         }, 
         data: responseDetails 
        }) 
        .done(function (data) { 
          if (data.status == "Success") { 
//Success code goes here 
}