我想做一些非常简单的事情。 我的页面中有一个按钮。
<form action="/process" method="POST">
<input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>
</form>
现在我想要的是当用户按下此提交按钮时。它表明&#34; loading&#34; gif动画,直到它从服务器获得响应。
但是我很久以来一直在努力。
我该如何实现?
答案 0 :(得分:34)
如果你正在使用ajax(尽可能简单)
将你的加载gif图像添加到html并隐藏它(现在使用html中的样式,你可以将它添加到单独的CSS中):
<img src="path\to\loading\gif" id="img" style="display:none"/ >
单击按钮时显示图像,并在成功功能
上再次隐藏它$('#buttonID').click(function(){
$('#img').show(); //<----here
$.ajax({
....
success:function(result){
$('#img').hide(); //<--- hide again
}
}
确保在ajax错误回调上隐藏图像,以确保即使ajax失败也会隐藏gif。
答案 1 :(得分:7)
尝试
$("#btnId").click(function(e){
e.preventDefault();
//show loading gif
$.ajax({
...
success:function(data){
//remove gif
},
error:function(){//remove gif}
});
});
编辑:阅读评论后
如果您决定反对ajax
$("#btnId").click(function(e){
e.preventDefault();
//show loading gif
$(this).closest('form').submit();
});
答案 2 :(得分:5)
最佳加载和阻止ajax调用的特定div直到成功为止Blockui
浏览此链接http://www.malsup.com/jquery/block/#element
示例用法:
<span class="no-display smallLoader"><img src="/images/loader-small.png" /></span>
脚本
jQuery.ajax(
{
url: site_path+"/restaurantlist/addtocart",
type: "POST",
success: function (data) {
jQuery("#id").unblock();
},
beforeSend:function (data){
jQuery("#id").block({
message: jQuery(".smallLoader").html(),
css: {
border: 'none',
backgroundColor: 'none'
},
overlayCSS: { backgroundColor: '#afafaf' }
});
}
});
希望这有助于实现非常互动。
答案 3 :(得分:3)
$("#btnId").click(function(e){
e.preventDefault();
$.ajax({
...
beforeSend : function(xhr, opts){
//show loading gif
},
success: function(){
},
complete : function() {
//remove loading gif
}
});
});
答案 4 :(得分:0)
//do processing
$(this).attr("label", $(this).text()).text("loading ....").animate({ disabled: true }, 1000, function () {
//original event call
$.when($(elm).delay(1000).one("click")).done(function () {//processing finalized
$(this).text($(this).attr("label")).animate({ disabled: false }, 1000, function () {
})
});
});
答案 5 :(得分:0)
我知道这是一个非常晚的回复,但我最近看到了这个查询并找到了一个工作方案,
OnClick的提交使用以下代码:
$('#Submit').click(function ()
{ $(this).html('<img src="icon-loading.gif" />'); // A GIF Image of Your choice
return false });
要停止Gif,请使用以下代码:
$('#Submit').ajaxStop();