jQuery 使用ajax发布时显示加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2509711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display loading image while post with ajax
提问by Keltex
I know there are thousands of examples on the internet, but I want for the script I already have to display a loading gif image while the data is retrievedd. My java knowledge are poor, therefore I'm asking how to change the following:
我知道互联网上有数以千计的例子，但我想要脚本，我已经必须在检索数据时显示加载的 gif 图像。我的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>
And my div is here:
我的 div 在这里：
<div class="content" id="data"></div>
Thanks. John
谢谢。约翰
回答by Keltex
Let's say you have a tag someplace on the page which contains your loading message:
假设您在页面上的某个位置有一个包含加载消息的标签：
<div id='loadingmessage' style='display:none'>
<img src='loadinggraphic.gif'/>
</div>
You can add two lines to your ajax call:
您可以在 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
}
});
回答by Jonathan Joosten
$.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');
}
});
have fun playing arround!
玩得开心！
if you should have quick loading times which prevent te loading showing, you can add a timeout of some sort.
如果您应该有快速的加载时间来阻止 te 加载显示，您可以添加某种超时。
回答by Unknown Developer
This is very simple and easily manage.
这非常简单且易于管理。
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;
}
回答by Asif Mushtaq
<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";
}
});
回答by sonu sharma
//$(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>回答by sapna
make sure to change in ajax call
确保更改 ajax 调用
async: true,
type: "GET",
dataType: "html",
