巧用ajax请求服务器加载数据列表时提示loading的方法
2017-04-17 10:33
477 查看
我们利用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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 巧用ajax请求服务器加载数据列表时提示loading
- 【jQuery】使用ajax()方法加载服务器数据
- jquery mobile 请求数据方法执行时显示加载中提示框
- jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
- 使用ajax()方法加载服务器数据
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- js对js加载拼接的html代码中元素添加ajax方法请求后台数据
- 初涉Ajax,以post或get方法发送数据,以json或xml形式接收服务器返回的请求
- ajax请求加载Loading或错误提示
- jqury+ajax每秒向后台发送请求数据然后返回页面(包括jqruy页面加载完毕才执行方法)
- jQuery 中的 Ajax 全局事件 当用户点击页面上某一按钮请求数据时,在页面上显示 loading... ,页面加载完成后隐藏
- jquery-ajax请求后台数据转换json显示在select下拉列表&&jquery获取下拉列表的值和显示内容的方法
- 使用ajax()方法加载服务器数据
- Win7的IIS配置asp.net出现“由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面。”(图文解决方法)
- ajax中如何将utf-8编码的数据请求发送到gbk编码应用的解决方法
- 使用sql server management studio 2008 无法查看数据库,提示 无法为该请求检索数据 错误916解决方法
- AJAX跨域请求json数据的实现方法
- jquery .ajax方法 异步表单,接收服务器返回的数据
- jquery的ajax提交时“加载中”提示的处理方法
- 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法