我们利用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. 【C#版本详情回顾】C#3.0主要功能列表

    隐式类型的本地变量和数组 在与本地变量一起使用时,var 关键字指示编译器根据初始化语句右侧的表达式推断变量或数组元素的类型 对象初始值设定项 支持无需显式调用构造函数即可进行对象初始化 集合初始值设 ...

  2. 利用sqlclr实现数据库服务器端数据加密解密

    在公司中一同事用sqlclr写数据迁移自动化执行脚本,发现他在执行脚本时对数据进行了加密. 个人觉得利用sqlclr对数据进行加密是一个解决数据网络安全传输的不错的方案. 以下是一个小的案例: --- ...

  3. [Java]利用拦截器和自定义注解做登录以及权限验证

    1.自定义注解 需要验证登录的注解 package com.etaofinance.wap.common; import java.lang.annotation.Documented; import ...

  4. Visual Studio 2014

    开发 ASP.NET vNext 初步总结(使用Visual Studio 2014 CTP1) 2014-06-06 18:04 by 梁逸晨, 2149 阅读, 29 评论, 收藏, 编辑 新特性 ...

  5. MVC中使用Unity Ioc Container

    ASP.NET MVC中使用Unity Ioc Container   写在前面 安装Unity 添加服务层 IArticleRepository类型映射 服务注入到控制器 Global.asax初始 ...

  6. EPROCESS KPROCESS PEB

    EPROCESS KPROCESS PEB <寒江独钓>内核学习笔记(2)     在学习笔记(1)中,我们学习了IRP的数据结构的相关知识,接下来我们继续来学习内核中很重要的另一批数据结 ...

  7. iOS开发技术分享(1)— iOS本地数据存储

    iOS开发技术分享(1)— iOS本地数据存储 前言: 我本是一名asp.net程序员,后来加入了iOS游戏开发队伍,到现在也有一年多的时间了.这一年来,每天都干到2.3点钟才睡觉,不为别的,只为了学 ...

  8. AOP的成员介绍

    AOP(Aspect Oriented Programming)面向切面编程,AOP的作用不过多介绍,本文是主要是介绍AOP的成员,是我在复习的时候记录的一些笔记,方便以后查阅方便一些. JointP ...

  9. key-list类型内存数据引擎介绍及使用场景

    “互联网数据目前基本使用两种方式来存储,关系数据库或者key value.但是这些互联网业务本身并不属于这两种数据类型,比如用户在社会化平台中的关系,它是一个list,如果要用关系数据库存储就需要转换 ...

  10. 安装arcgis server 10.2遇到的问题总结

    1.创建管理站点失败 错误提示:Failed to create the site. The machine does not have a valid license. Please authori ...