巧用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上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...
随机推荐
- Just a complaint about the college examinations
Well , you know. As a college student who want to find a good job after graduating like me , scores ...
- android 实现分享功能两种方法
当我想做一个智能的记事本的时候,我就在尝试自己写一组分享功能.后来才知道,原来每个社交软件中都有自己的分享接口. 这就大大减少了我们的代码量了. 第一种方法:特点--简单 package com.ex ...
- 解决nexus下载maven索引的问题
解决nexus下载maven索引的问题 (2011-10-12 17:48:46) 转载▼ 标签: it 分类: java 转自 http://www.colorfuldays.org/program ...
- .NET编程规范
.NET开发编程规范 第1章 程序的版式 版式虽然不会影响程序的功能,但会影响可读性.程序的版式追求清晰.美观,是程序风格的重要构成因素. 可以把程序的版式比喻为"书法".好的&q ...
- iOS证书深究
iOS证书深究 iOS的系列证书很令人头痛,但是也提供了完整的保护. 在开发过程中,遇到的基本的证书有Xcode真机调试或者打包用证书,也有消息推送证书等:每种证书分为开发版(development) ...
- .NET:线程本地存储、调用上下文、逻辑调用上下文
.NET:线程本地存储.调用上下文.逻辑调用上下文 目录 背景线程本地存储调用上下文逻辑调用上下文备注 背景返回目录 在多线程环境,如果需要将实例的生命周期控制在某个操作的执行期间,该如何设计?经典的 ...
- JQuery的插件式开发
如果你只会JQuery的插件式开发, 那么你可以进来看看? 对于JQuery的学习,已经有3年多的时间了,直到去年与我的组长一起做项目,看到他写的JS,确实特别漂亮,有时甚至还看不太懂, 我才发现其实 ...
- 解析Infopath生成的XSN结构
解析Infopath生成的XSN结构 解压XSN文件,得到下图文件 Infopath包括xsl.xsd.xsf.xml文件格式 Manifest.xsf是infopath的主要集合文件,包含对其他各个 ...
- CKeditor 集成 CKFinder
之前照着网上的做,遇到了一些问题,经过多次实验修改最后算是成功了,下面进行详细讲解. 一.CKeditor的配置(附件中已有最新版CKeditor和CKFinder) 1.需要下载ckeditor, ...
- IceMx.Mvc 我的js MVC 框架 二、视图的数据绑定
介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...