ajax操作的时候，显示“正在加载中……”这个怎么弄？

ajax操作的时候，显示“正在加载中……”这个怎么弄？

或者是显示一张gif动画，循环转动的那种

像这个文字或者图片，应该加在ajax方法的哪一块呢？

等数据加载好了，这个文字或者图片消失，显示加载后的数据

10 个解决方案

#1

可以用一个<div>，里面放一个gif图片，当开始异步调用方法的时候让它显示在相应位置，异步方法成功返回的时候，让div的display = "none"，这句话写在成功调用后的successed方法里面

#2

不知道你用什么框架？我在做的时候用的Extjs

比如异步调用一个方法
myFunction(pram1, myFunSuccessed, myFunFailed);

function myFunSuccessed(){
   Ext.get("divID").dom.style.display = "none“；
}

#3

LS的，用ext还用写这些？直接调方法就行了
Ext.getCmp("form1").getEl().mask("正在加载中.请稍等...", "x-mask-loading");

#4

$.ajax({
beforeSend:function(){
$("#showMes").html('loading...');
},
completed:function(){
$("#showMes").html('');

}
});

<div id="showMes"></div>

#5

哦哦，我不是用框架，都是手工写的简单代码，比如这样的：

	var vid=document.getElementById('vid').value;
    function ajaxfunction(page,vid){
        if(page.length==0){
            return;
        }
        var xmlHttpComments;
        try{
            //FF Opear 8.0+ Safair
            xmlHttpComments=new XMLHttpRequest();
        }
        catch(e){
            try{
                xmlHttpComments=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                alert("您的浏览器不支持AJAX");
                return false;    
            }
        }
        xmlHttpComments.onreadystatechange=function(){
            if(xmlHttpComments.readyState==4){
                document.getElementById("text_comment").innerHTML=xmlHttpComments.responseText;
            }
        }
        var url="../js/AjaxComments.php";
        url+="?page="+page+"&vid="+vid+"&sid="+Math.random();
        xmlHttpComments.open("GET",url,true);
        xmlHttpComments.send(null);
    }
	ajaxfunction(1,vid);

#6

引用 1 楼 maderic 的回复:

可以用一个<div>，里面放一个gif图片，当开始异步调用方法的时候让它显示在相应位置，异步方法成功返回的时候，让div的display = "none"，这句话写在成功调用后的successed方法里面

基本上就是这样 那个gif是个动画效果罢了 不知道你是否了解Ext 他那个遮罩就是这种

#7

引用 6 楼 fanchuanzhidu 的回复:

引用 1 楼 maderic 的回复:
可以用一个<div>，里面放一个gif图片，当开始异步调用方法的时候让它显示在相应位置，异步方法成功返回的时候，让div的display = "none"，这句话写在成功调用后的successed方法里面

基本上就是这样 那个gif是个动画效果罢了 不知道你是否了解Ext 他那个遮罩就是这种

遮罩div，嗯嗯，明白

#8

楼主 上面说的 都是具体的
关键是明白思路
首先定义一个隐藏的div
放在页面中间,div里面可以是一个动画的图片等等

然后当你要用ajax去操作时,让那个div显示出来,并且设置zindex最高  让它在最上面

这个时候去后台处理

之后回调前台的方法,处理完毕之后在隐藏这个div


具体实现可以参考楼上

#9

$.ajax({
beforeSend:function(){
$("#showMes").html('loading...');
},
completed:function(){
$("#showMes").html('');

}
});

<div id="showMes"></div>

#10

该回复于2016-10-21 16:30:18被管理员删除