我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading...

要在页面需要加载的JS文件:

<script src="../js/libs/weui.min.js"></script>

可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/

这里主要讲jQuery ajax的get,查询数据时,它的结构为:

$.ajax({
type: 'get',
url: url,
data: data,
dataType: 'json',
contentType: 'apllication/json; charset=utf-8' ,
//数据加载前调用的方法 beforeSend()
beforeSend: function(data){
//这里判断,如果没有加载数据,会显示loading
if(data.readyState == 0){
weui.loading('loading');
}
},
//数据加载成功调用的方法 sucess()
sucess: function(data){
//这里写数据加载成功后,会执行的代码
},
//数据加载成功后调用的方法 complete()
complete: function(data){
//这里判断,数据加载成功之后,loading 隐藏
if(data.status == 200){
setTimeOut(function(){
weui.loading('loading').hide();
},500);
}
},
//数据加载错误后调用的方法 error()
error: function(data){
weui.topTips('数据加载失败!');
}
})

巧用ajax请求服务器加载数据列表时提示loading的更多相关文章

  1. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  2. 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

    瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...

  3. 使用 jQuery Ajax 在页面滚动时从服务器加载数据

    简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...

  4. PHP+Ajax点击加载更多列表数据实例

    一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...

  5. ajax按楼层加载数据

    代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  6. Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果)

    Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果) 首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddr ...

  7. Ajax页面的加载数据与删除

    1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...

  8. Ajax 滚动异步加载数据

    第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...

  9. Ajax动态滚动加载数据

    看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...

随机推荐

  1. JBoss7官方下载最新版本

    JBoss是全世界开发人员共同努力的成果.一个基于J2EE的开放源码的应用server. 由于JBoss代码遵循LGPL许可,能够在不论什么商业应用中免费使用它.而不用支付费用. 2006年,Jbos ...

  2. Byte[]、Image、Bitmap 之间的相互转换

    原文:Byte[].Image.Bitmap 之间的相互转换 /// <summary>        /// 将图片Image转换成Byte[]        /// </summ ...

  3. 区域、模板页与WebAPI初步

    区域.模板页与WebAPI初步 一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域( ...

  4. HTML 速成

    html零基础者入. 记得学计算机网络的时候好像有学过一些HTML,但没运用起来都忘光了.近来想学学如何写网页.就从html(HyperText Markup Language超文本标记语言)入手了. ...

  5. ps教程--折纸效果

    原文:http://www.fevte.com/tutorial-16947-1.html

  6. AngularJS+requireJS项目的目录结构设想

    AngularJS+requireJS项目的目录结构设想 准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default    放页面,不过 ...

  7. 基于Web的IIS管理工具

    Servant:基于Web的IIS管理工具   Servant for IIS是个管理IIS的简单.自动化的Web管理工具.安装Servant的过程很简单,只要双击批处理文件Install Serva ...

  8. 正则表达式测试分析工具Expresso

    正则表达式测试分析工具Expresso 一个正则表达式的小工具--myRegexHelper   把以前做的一个功能抽取出来做成一个小的正则表达式测试工具.没什么特色,有两点功能: 一.方便的测试正则 ...

  9. Power Designer导出实体类和NHibernate xml文件

    Power Designer导出实体类和NHibernate xml文件 今天研究了一下通过PowerDesigner生成实体类和NHibernate所需要的xml文件,方法是通过Power Desi ...

  10. C#做的颜色工具

    常常会用到绘制以及配色,每次看到 framework 里边的 KnowColor.xxx 我就一阵......到底啥颜色啊,干脆做一个一劳永逸的工具吧.功能包含: 可以实现枚举所有系统颜色 圆形.矩形 ...