web-dev-qa-db-fra.com

Afficher l'image de chargement en postant avec ajax

Je sais qu'il existe des milliers d'exemples sur Internet, mais je veux que le script me permette déjà d'afficher une image de chargement gif pendant la récupération des données. Ma connaissance de Java étant faible, je demande donc comment modifier les éléments suivants:

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

Et mon div est ici:

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

Merci . John

jqueryajaxloading
28
user301017

Disons que vous avez un tag quelque part sur la page qui contient votre message de chargement:

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

Vous pouvez ajouter deux lignes à votre appel 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
        }
    });
61
Keltex
$.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');
    }
});

amusez-vous en jouant!

si vous avez des temps de chargement rapides qui empêchent l'affichage du chargement, vous pouvez ajouter un délai d'expiration.

9
Jonathan Joosten

Jetez un coup d'oeil à ajaxStart et ajaxStop

9
Felipe Lima

C'est très simple et facile à gérer. 

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;
}
2
Unknown Developer
<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";
            }
        });
1
Asif Mushtaq

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

$(document).ready(function(){
	$("a").click(function(event){
		event.preventDefault();
		$.ajax({
			beforeSend: function(){
				$('#text').html("<img src='ajax-loader.gif' /> Loading...");
			},
			success : function(){
				setInterval(function(){ $('#text').load("cd_catalog.txt"); },1000);
			}
		});
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		
<a href="http://www.wantyourhelp.com">[click to redirect][1]</a>
<div id="text"></div>

0
sonu