Query Ajax 异步加载显示等待效果

Posted 2021-04-15 逆风成长的草

整体思路

1. 进入页面相关请求中gif图隐藏

2. 发起请求，请求中gif图就展示出来

3. 收到返回结果，请求中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", //返回数据形式为json success : 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", //返回数据形式为json success : 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">&nbsp;&nbsp;开始时间：</label> <input type="date" id="starttime" placeholder="请选择开始日期"> <label for="endtime">&nbsp;&nbsp;结束时间：</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%}