Visualizzazione caricamento immagine post con ajax

Question

So che ci sono migliaia di esempi su Internet, ma per lo script devo già visualizzare un'immagine gif caricata mentre i dati vengono recuperati. La mia conoscenza Java sono poveri, quindi sto chiedendo come cambiare la seguente:

<script type="text/javascript"> 
$(document).ready(function(){ 
    function getData(p){ 
    var page=p; 
    $.ajax({ 
     url: "loadData.php?id=<? echo $id; ?>", 
     type: "POST", 
     cache: false, 
     data: "&page="+ page, 
     success : function(html){ 
      $(".content").html(html); 
     } 
    }); 
} 
getData(1); 

$(".page").live("click", function(){ 
    var id = $(this).attr("class"); 
    getData(id.substr(8)); 
     }); 
     }); 
    </script> 

E il mio div è qui:

<div class="content" id="data"></div> 

Grazie. John

Answer 1

Diciamo che avete una qualche parte tag nella pagina che contiene il messaggio di carico:

<div id='loadingmessage' style='display:none'> 
    <img src='loadinggraphic.gif'/> 
</div> 

È possibile aggiungere due righe al chiamata AJAX:

function getData(p){ 
    var page=p; 
    $('#loadingmessage').show(); // show the loading message. 
    $.ajax({ 
     url: "loadData.php?id=<? echo $id; ?>", 
     type: "POST", 
     cache: false, 
     data: "&page="+ page, 
     success : function(html){ 
      $(".content").html(html); 
      $('#loadingmessage').hide(); // hide the loading message 
     } 
    }); 

Answer 2

Date un'occhiata a ajaxStart e ajaxStop

Answer 3

$.ajax(
{ 
    type: 'post', 
    url: 'mail.php', 
    data: form.serialize(), 
    beforeSend: function() 
    { 
     $('.content').html('loading...'); 
    }, 
    success: function(data) 
    { 
     $('.content').html(data); 
    }, 
    error: function() 
    { 
     $('.content').html('error'); 
    } 
}); 

divertiti a giocare!

se si devono avere tempi di caricamento rapidi che impediscono il caricamento del carico, è possibile aggiungere un timeout di qualche tipo.

Answer 4

Questo è molto semplice e facilmente gestibile.

jQuery(document).ready(function(){ 
jQuery("#search").click(function(){ 
    jQuery("#loader").show("slow"); 
    jQuery("#response_result").hide("slow"); 
    jQuery.post(siteurl+"/ajax.php?q="passyourdata, function(response){ 
     setTimeout("finishAjax('response_result', '"+escape(response)+"')", 850); 
      }); 
}); 

}) 
function finishAjax(id,response){ 
     jQuery("#loader").hide("slow"); 
     jQuery('#response_result').html(unescape(response)); 
     jQuery("#"+id).show("slow");  
     return true; 
} 

Answer 5

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

function getData(p){ 
     var page=p; 
     document.getElementById("load").style.display = "block"; // show the loading message. 
     $.ajax({ 
      url: "loadData.php?id=<? echo $id; ?>", 
      type: "POST", 
      cache: false, 
      data: "&page="+ page, 
      success : function(html){ 
       $(".content").html(html); 
     document.getElementById("load").style.display = "none"; 
      } 
     }); 

Answer 6

//$(document).ready(function(){ 
 
// \t $("a").click(function(event){ 
 
// \t \t event.preventDefault(); 
 
// \t \t $("div").html("This is prevent link..."); 
 
// \t }); 
 
//}); \t \t \t 
 

 
$(document).ready(function(){ 
 
\t $("a").click(function(event){ 
 
\t \t event.preventDefault(); 
 
\t \t $.ajax({ 
 
\t \t \t beforeSend: function(){ 
 
\t \t \t \t $('#text').html("<img src='ajax-loader.gif' /> Loading..."); 
 
\t \t \t }, 
 
\t \t \t success : function(){ 
 
\t \t \t \t setInterval(function(){ $('#text').load("cd_catalog.txt"); },1000); 
 
\t \t \t } 
 
\t \t }); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t \t 
 
<a href="http://www.wantyourhelp.com">[click to redirect][1]</a> 
 
<div id="text"></div>

Answer 7

assicurarsi di modificare in ajax chiamata

async: true, 
type: "GET", 
dataType: "html",