インターネットには数千の例があることは知っていますが、スクリプトでは、データの取得中に既にロードGIFイメージを表示する必要があります。 My Java知識が乏しいため、次の変更方法を尋ねています。
<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>
ありがとう。ジョン
ロードメッセージを含むページのどこかにタグがあるとしましょう:
<div id='loadingmessage' style='display:none'>
<img src='loadinggraphic.gif'/>
</div>
Ajax呼び出しに2行追加できます。
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
}
});
$.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');
}
});
楽しく遊べます!
読み込み時間を短くして読み込み時間を短縮する必要がある場合は、何らかのタイムアウトを追加できます。
これは非常にシンプルで簡単に管理できます。
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;
}
<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";
}
});
//$(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>