巧用ajax请求服务器加载数据列表时提示loading
我们利用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的更多相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
- PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
- ajax按楼层加载数据
代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果)
Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果) 首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddr ...
- Ajax页面的加载数据与删除
1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- Ajax动态滚动加载数据
看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...
随机推荐
- android 使用 service 实现音乐
今天的球员趁service.播放音乐service结束,进度条activity结束,因此,基础工作activity和service互动,本文将使用IBinder互动.主要activity能够调用ser ...
- 我的CSS 入门1
CSS(Cascading Style Sheets)级联样式表.我现在所知的,她的存在能够更好的管理多个HTML文件,或者是为了使得网页设计更为丰富多彩,“简单可依赖”. 如果你对HTML一无所知, ...
- PhotoShop基本工具 -- 移动工具
艺术或学习的东西吧, 爱好 比学编程还难 PS版本号 : PhotoShop CS6 1. 移动工具 (1) 工具栏和属性栏 工具栏 和 属性栏 : 左側的是工具栏, 每选中一个工具, 在菜单条的 ...
- WCF 采用net.tcp协议
WCF 采用net.tcp协议实践 概述 与Socket相比,WCF真是爽得不得了,其基本指导思想为SOA——面向服务. 其基本配置在于ABC(Address,Binding,Contract), ...
- Akka入门实例
Akka入门实例 Akka 是一个用 Scala 编写的库,用于简化编写容错的.高可伸缩性的 Java 和 Scala 的 Actor 模型应用. Actor模型并非什么新鲜事物,它由Carl Hew ...
- Ubuntu下安装Pyqt4
确保系统中安装有python之后,在终端输入: sudo apt-get install libxext6 libxext-dev libqt4-dev libqt4-gui libqt4-sql q ...
- Ninject的项目情况
Ninject的项目情况 首先,它有很多的项目组成,适合不同的环境,当然它有几个基本的核心库. 为什么它会有这么多的库呢?因为轻量级,易于使用和被扩展是它的目标,代码越是少,你使用代码的可能性越高嘛. ...
- ROWNUMBER()、RANK()、DENSE_RANK()、NTILE1
SQLServer针对排名函数ROWNUMBER().RANK().DENSE_RANK().NTILE的研究!~ 相信大家在软件工程中经常会遇到对某些数据进行排名的问题,尤其是对于电子商务的HR来说 ...
- [转]iOS Tutorial – Dumping the Application Memory Part 2
Source:https://blog.netspi.com/ios-tutorial-dumping-the-application-memory-part-2/ In my previous bl ...
- [置顶] 从引爆点的角度看360随身wifi的发展
从引爆点的角度看360随身wifi的发展 不到一个月的时间,随身wifi预定量就数百万.它的引爆点在哪里,为什么相同的产品这么多它却能火起来,通过对随身wifi的了解和我知识层面分析,主要是因为随身w ...