jquery的ajax提交时“加载中”提示的处理方法

Haoroid 2013-01-23

方法1:使用ajaxStart方法定义一个全局的“加载中。。。”提示

$(function(){

$("#loading").ajaxStart(function(){

$(this).html("<imgsrc='/jqueryStu/images/loading.gif'/>");

});

$("#loading").ajaxSuccess(function(){

$(this).html("");

//$(this).empty();//或者直接清除

});

});

<divid="loading"></div>

注意:

所有的ajax提交都会触发ajaxStart事件,都会在你定义的

<divid="loading"></div>

位置上显示“加载中。。。”的图标(当然你也可以定义文字,但是一个加载中的图片比较好看);

-------但是一定要注意,同时要定义好ajaxSuccess事件,ajax提交成功后把这个图标隐藏起来!!!

特别提示:

使用ajaxStart或ajaxSuccess事件时,相当于定义了一个全局的显示“加载中。。。”的位置,所有ajax提交时候“加载中。。。”的图标都始终显示在一个位置!!!!

方法2:在ajax方法中定义任意位置显示的“加载中。。。”提示

$('#ajax_test2').click(function(){

$.ajax({

url----url路径,根据你需要些啦,

type:'post',

data:'name=ZXCVB',

timeout:15000,

beforeSend:function(XMLHttpRequest){

//alert('远程调用开始...');

$("#loading").html("<imgsrc='/jqueryStu/images/loading.gif'/>");

},

success:function(data,textStatus){

alert('开始回调,状态文本值:'+textStatus+'返回数据:'+data);

//$("#loading").empty();

},

complete:function(XMLHttpRequest,textStatus){

//alert('远程调用成功,状态文本值:'+textStatus);

$("#loading").empty();

},

error:function(XMLHttpRequest,textStatus,errorThrown){

alert('error...状态文本值:'+textStatus+"异常信息:"+errorThrown);

$("#loading").empty();

}

});

});

<inputtype="button"id="ajax_test2"value="Ajax方式">

<divid="loading"></div>

很明显,在beforeSend时,在指定的位置显示“加载中。。。”图标,在error、complete、success后把该图标移除掉!!!!

注意:

页面有多个ajax提交时候,建议使用第二种方式,因为“加载中。。。”图标可以显示在任意你需要刷新的位置上!!!!!这就是它的优势:自由呀!!!!

==其他=====================

加载中图片如下,当然你可以自由的设计哦:

相关推荐

mmywcoco / 0评论 2020-06-06