mui开发APP教程之mui.ajax请求后出现“加载中”

利用mui.ajax向服务器请求数据会出现请求超时的情况,一般若是10S之后还没有响应,就会定义为超时,那么出错了的时候,这10秒钟不可能给用户白屏,即便是请求成功之后打开一个新页面,那么这个间隔时间也给用户响应。

但是mui 的ajax并没有实现类似jquery的ajaxStart 和 ajaxStop方法,然而在移动端上这两个方法还是比较常用的,比如在向后台提交数据的时候显示loading的图标,防止用户的第二次提交,并在数据提交完成时取消loading动画,现在,mui提供了两个类似方法,但是文档中并没有提到(mui),并且HBuilder生成的代码块也并没有这两个方法。真是需要好好完善。

好在,mui提供了beforeSend和complete这两个方法,功能类似于jquery的ajaxStart 和 ajaxStop方法,所以大家现在可以使用。

var mask=mui.createMask();//遮罩层
mui(documengt.body).on('tap','#login',function(){
    mui.ajax('http://127.0.0.1/login',{
    data:{
        userName:userName,
        userPwd:userPwd
    },
    dataType: 'json', //服务器返回json格式数据
        type: 'post', //HTTP请求类型
        timeout: 10000, //超时时间设置为10秒;
    beforeSend: function() {
        plus.nativeUI.showWaiting(title, options);
        mask,show();//显示遮罩层
    },
    complete: function() {
        plus.nativeUI.closeWaiting();
        mask.closed();//关闭遮罩层
    },
    success: function(data) {
        //服务器返回响应,根据响应结果,分析是否登录成功; 
        if(data=='1'){
            mui.alert('登录成功');
        }
    },
    error: function(xhr, type, errorThrown) {
        mui.alert('服务器连接超时,请稍后再试’);
    }
}
});

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值