Mostrar la imagen de carga durante la publicación con ajax

Question

Sé que hay miles de ejemplos en Internet, pero quiero que para el script ya tenga que mostrar una imagen gif mientras se recuperan los datos. Mi conocimiento de Java son pobres, por lo tanto lo que pido cómo cambiar lo siguiente:

<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> 

Y mi div está aquí:

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

Gracias. John

Answer 1

Digamos que usted tiene un algún lugar etiqueta en la página que contiene el mensaje de carga:

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

Se pueden añadir dos líneas a su llamada 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

Tome un vistazo a ajaxStart y 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'); 
    } 
}); 

¡diviértete jugando!

si debe tener tiempos de carga rápidos que impidan que se muestre la carga, puede agregar un tiempo de espera de algún tipo.

Answer 4

Esto es muy simple y fácil de administrar.

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

asegúrese de cambiar en ajax llamada

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