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提交时候，建议使用第二种方式，因为“加载中。。。”图标可以显示在任意你需要刷新的位置上！

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

相关文章