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

Posted 逆风成长的草

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Query Ajax 异步加载显示等待效果相关的知识,希望对你有一定的参考价值。

整体思路

  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%}


以上是关于Query Ajax 异步加载显示等待效果的主要内容,如果未能解决你的问题,请参考以下文章

页面加载时让其显示笼罩层与加载等待图片

如何给JQUERY+AJAX加上加载等待效果

jQuery 页面加载等待特效,当数据加载完成效果消失的代码?

如何异步加载和显示数据

Javascript在ajax提交过程中页面显示加载中,请等待效果,并在提交过程中限制确定按钮防止多次提交,提交完成后,解除提交限制

一款基于jQuery Ajax的等待效果