AJax技术

Ajax加载中显示loading

字号+ 作者:H5之家 来源:H5之家 2017-09-06 09:06 我要评论( )

使用ajaxStart方法定义一个全局的“加载中。。。”提示$(function(){ $(#loading).ajaxStart(function(){ $(this).html.(); }); $(#loading).ajaxSuccess(funct

Ajax加载中显示loading

作者:狗蛋的博客 字体:[ ] 来源:互联网 时间:2017-09-04

狗蛋的博客通过本文主要向大家介绍了ajax等相关知识,希望对您有所帮助,也希望大家支持微课江湖

$(function(){ $("#loading").ajaxStart(function(){ $(this).html.("<img src='/jqueryStu/images/loading.gif' />"); }); $("#loading").ajaxSuccess(function(){ $(this).html.(""); // $(this).empty(); // 或者直接清除 }); }); <div id="loading"></div>

注意:

所有的ajax提交都会触发ajaxStart事件,都会在你定义的<div id="loading"></div>位置上显示“加载中。。。”的图标(当然你也可以定义文字,但是一个加载中的图片比较好看);

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

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

$('#ajax_test2').click(function(){ $.ajax({ url ---- url路径,根据你需要些啦, type:'post', data:'name=ZXCVB', timeout:15000, beforeSend:function(XMLHttpRequest){ //alert('远程调用开始...'); $("#loading").html.("<img src='/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(); } }); }); < input type.="button" id="ajax_test2" value="Ajax方式"> <div id="loading"></div>

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

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

您可能想查找下面的文章:

相关文章

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery ajax中error返回错误及一直返回error的解答,jqueryajax

    JQuery ajax中error返回错误及一直返回error的解答,jqueryajax

    2017-09-06 10:00

  • JQuery ajax中error返回错误及一直返回error的解答,jqueryajax

    JQuery ajax中error返回错误及一直返回error的解答,jqueryajax

    2017-09-06 10:00

  • Ajax获取到数据放入echarts里不显示的原因分析及解决办法

    Ajax获取到数据放入echarts里不显示的原因分析及解决办法

    2017-09-05 12:07

  • 基于Ajax的formData图片和数据上传,

    基于Ajax的formData图片和数据上传,

    2017-09-05 11:07

网友点评