Query Ajax 异步加载显示等待效果
整体思路
进入页面相关请求中gif图隐藏
发起请求，请求中gif图就展示出来
收到返回结果，请求中gif图隐藏
实现分析
进入页面，gif图默认不展示，其对应标签的style默认为style="display:none;
触发请求时，gif图对应的标签的style中display被移除，图片显示出来。实现可以参考jQuery效果-show()方法
请求接收到响应结果，gif图不展示，其对应标签的style变为为style="display:none;"其实现可以参考jQuery效果-hide()方法
通过看下面ajax分析模块可以发现，可以把show的操作放在beforeSend:function(){},把hide操作放在success:function(result){}和error:function(result){}
ajax分析
ajax常用模板
$.ajax({type:'POST', // 规定请求的类型（GET 或 POST）async:true,//选择异步或者同步（true为异步，false为同步）url:uploadV, // 请求的url地址dataType:'json', //预期的服务器响应的数据类型data:{},//规定要发送到服务器的数据beforeSend:function(){ //发送请求前运行的函数（发送之前就会进入这个函数）// ....},success: function(result){ // 当请求成功时运行的函数//...},error:function(result){ //失败的函数//...},complete:function(){ //请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后，不管成功还是失败 都会进这个函数）// ...}});
各模块代码实现
样式：
#icon {position:absolute;top:400px;left:750px;display:none;}//#是id选择选择器,.的是类选择器;选#的就要这样选<p id="icon">,选.的就这样<p class="icon">,这样才能运用上相对应的style,id选择器只能在html页面使用一次，针对性更强
前端html部分：
<span id="icon"><img style="width:120px;height:120px;" src="/static/image/waiting.gif"></span>ajax部分：
function wcyhello(choicetype) {//获取dom容器var myChart = echarts.init(document.getElementById('chartmain'));//通过Ajax获取数据$.ajax({beforeSend:function(){myChart.clear();$("#icon").show();},type : "GET",async : true, //同步执行url : "{% url 'echartdata' %}",data:{'name':document.getElementById('name').value,'projectchoice':document.getElementById('projectchoice').value,'timechoice':document.getElementById('timechoice').value,'userdimension':document.getElementById('userdimension').value,'choicetype':choicetype,'starttime':document.getElementById('starttime').value,'endtime':document.getElementById('endtime').value},dataType : "json", //返回数据形式为jsonsuccess : function(result) {$("#icon").hide();options=result.optiondata;// 使用刚指定的配置项和数据显示图表。myChart.setOption(options);},error : function(errorMsg) {$("#icon").hide();alert("不好意思，大爷，图表请求数据失败啦!");myChart.hideLoading();}});}
最终代码实现：
{% extends 'base2.html' %}{% block ttitle%}wcy的工具库{%endblock%}{% block breadcrumb%}<script src="../static/bootstrap/dist/js/echarts.js"></script><style>#icon {position:absolute;top:400px;left:750px;display:none;}</style><script>function wcyhello(choicetype) {//获取dom容器var myChart = echarts.init(document.getElementById('chartmain'));//通过Ajax获取数据$.ajax({beforeSend:function(){myChart.clear();$("#icon").show();},type : "GET",async : true, //同步执行url : "{% url 'echartdata' %}",data:{'name':document.getElementById('name').value,'projectchoice':document.getElementById('projectchoice').value,'timechoice':document.getElementById('timechoice').value,'userdimension':document.getElementById('userdimension').value,'choicetype':choicetype,'starttime':document.getElementById('starttime').value,'endtime':document.getElementById('endtime').value},dataType : "json", //返回数据形式为jsonsuccess : function(result) {$("#icon").hide();options=result.optiondata;// 使用刚指定的配置项和数据显示图表。myChart.setOption(options);},error : function(errorMsg) {$("#icon").hide();alert("不好意思，大爷，图表请求数据失败啦!");myChart.hideLoading();}});}</script><!-- Content Header (Page header) --><section class="content-header"><ol class="breadcrumb"><li><a href="{% url 'xmind' %}"><i class="fa fa-dashboard"></i> 主页</a></li><li class="active">报告图表工具</li></ol></section><section class="content"><div class="panel panel-info"><div class="panel-heading">查询条件</div><div class="panel-body"><select id="userdimension" name="projectchoice"><option value='all'>全员</option><option value='personal'>个人</option></select><input id="name" placeholder="请输入JIRA中用户名"><select id="projectchoice" name="projectchoice"><option value='all'>全部数据</option><option value='byproject'>按业务线展示数据</option></select><select id="timechoice" name="timechoice"><option value='qurter'>季度</option><option value='month'>月份</option></select><label for="starttime"> 开始时间：</label><input type="date" id="starttime" placeholder="请选择开始日期"><label for="endtime"> 结束时间：</label><input type="date" id="endtime" placeholder="请选结束始日期"><br><br><button class="btn btn-info" onclick="wcyhello('xq')">生成需求图表</button><button class="btn btn-info" onclick="wcyhello('bug')">生成BUG图表</button><button class="btn btn-info" onclick="wcyhello('validbug')">生成有效BUG图表</button></div></div></section><br><br><section class="content"><span id="icon"><img style="width:120px;height:120px;" src="/static/image/waiting.gif"></span><div class="row"><!-- left column --><div class="col-md-6"><div style="height:600px;width:800px;" id="chartmain"></div><div><br><br><br></div></div></div></section>{%endblock%}