虚位以待(AD)
虚位以待(AD)
首页 > 网络编程 > AJAX相关 > 巧用ajax请求服务器加载数据列表时提示loading的方法

巧用ajax请求服务器加载数据列表时提示loading的方法
类别:AJAX相关   作者:码皇   来源:互联网   点击:

下面小编就为大家带来一篇巧用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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关热词搜索: ajax请求loading