AJAX

Question

के साथ पोस्ट करते समय लोडिंग छवि प्रदर्शित करें मुझे पता है कि इंटरनेट पर हजारों उदाहरण हैं, लेकिन मैं स्क्रिप्ट के लिए चाहता हूं कि डेटा को पुनर्प्राप्त करते समय मुझे पहले से लोडिंग gif छवि प्रदर्शित करना पड़े। मेरे जावा ज्ञान गरीब हैं, इसलिए मैं निम्नलिखित बदलने का तरीका पूछ रहा हूँ:

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

और मेरे div यहाँ है:

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

धन्यवाद। जॉन

Answer 1

मान लीजिए कि आप जो आपके लोड हो रहा है संदेश है पृष्ठ पर एक टैग किसी ऐसे स्थान पर करते हैं:

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

आप अपने 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

ajaxStart पर एक नजर डालें और 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'); 
    } 
}); 

मज़ेदार खेल रहा है!

यदि आपके पास तेज़ लोडिंग समय होना चाहिए जो टी लोडिंग को रोकता है, तो आप किसी प्रकार का टाइमआउट जोड़ सकते हैं।

Answer 4

यह बहुत आसान और आसानी से प्रबंधित है।

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

ajax कॉल

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