Wyświetl ładowanie obrazu podczas posta z ajaxem

Question

Wiem, że w Internecie są tysiące przykładów, ale chcę, aby skrypt już wyświetlał ładujący obraz gif podczas pobierania danych. Moja znajomość Java są słabe, dlatego pytam, jak zmienić następujące:

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

A mój div jest tutaj:

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

Dzięki. John

Answer 1

Powiedzmy, że masz gdzieś tag na stronie, która zawiera wiadomość ładowania:

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

Możesz dodać dwie linie do wywołania 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

Spójrz na ajaxStart i 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'); 
    } 
}); 

baw się dobrze grając!

Jeśli powinieneś mieć szybkie czasy ładowania, które uniemożliwią ładowanie się pokazując, możesz dodać pewien limit czasu.

Answer 4

Jest to bardzo proste i łatwe w zarządzaniu.

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

upewnić się zmieniać w wywołaniu ajax

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