我们利用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. ComponentName意思

    ComponentNameActivity Intent i=new Intent(); i.setComponent(new ComponentName(String packageName,Str ...

  2. 编写SQL的辅助工具

    原文:编写SQL的辅助工具 今天在同事的帮助下,下载了一个工具:ApexSQL edit,可能是我孤陋寡闻,不知道还有这样的好工具,它可以在我键入SQL时,帮助我提示表的名称和列名称.还可以帮助我格式 ...

  3. 介绍一款基于jquery好用的编辑框htmlbox.full.js

    1. 可选择背景颜色,自主选择工具,感觉挺好用的,不过需要注意,添加引用后找不到工具图标的图片,找到脚本修改idir:属性改成自己的图片文件夹存放路径即可. asp.net mvc3提交内容报错提示含 ...

  4. beanutils中WrapDynaBean

    public class Emp   { private String  firstName="李";    private String lastName;    public ...

  5. 使用ServletContext实现数据共享和获得web.xml中的参数

    //适用于:很多文件需要初始化参数时,例如数据库账号和密码,不可能使用config这个对象,因为如果使用config对象去配置的话,那么每个servlet类都必须写一个参数,这时候就必须采用conte ...

  6. Jumony Core 3,真正的HTML引擎

    Jumony Core 3,真正的HTML引擎,正式版发布 2013-11-28 17:22 by Ivony..., 778 阅读, 18 评论, 收藏, 编辑 Jumony是一个开源项目,已经有三 ...

  7. C# BackgroundWorker组件学习

    C# BackgroundWorker组件学习  C# BackgroundWorker组件学习 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用Ba ...

  8. Service Manager 2012

    部署Service Manager 2012遇到的2个问题 上周装了个Service Manager 2012学习,以便完善System Center整个解决方案,在部署期间遇到2个问题,花了我不少时 ...

  9. 从UI开始

    虚拟化平台cloudstack(8)——从UI开始   UI ucloudstack采用的是前后端分离的架构,就是说前端可以选择使用web.swing甚至其它的界面,都可以. 我们来看cloudsta ...

  10. nginx 使用过程中一些基础性问题总结

    最近闲着无事,玩了下nginx.但本人在实践的过程中也遇到了一些问题,如,大家都知道应用服务器的处理都是无状态的,而nginx做了请求分发,我们在当前web服务器做得提交操作,可能下一刻就跑到另外一台 ...