8***@qq.com
8***@qq.com
  • 发布:2017-11-29 16:23
  • 更新:2017-11-29 16:23
  • 阅读:3263

mui.ajax请求的包装

分类:MUI

很早之前写的代码了,突然觉得值得分享,就有了此文。
这里讲的包装ajax请求就为了两个方面,
1、将所有ajax请求全部加上loading效果;
2、省去一些常用的dataType: "json",type: "post"属性,改成默认;
3、如果请求出现了逻辑上需要(需与后台有关)提示的信息时,可直接弹出提示;
另外,调用方式与mui的ajax一致,由于之前一直使用于jquery的ajax包装,改成兼容mui调用一致的方式。
代码比较简单,使用方式为:
mui.ajaxRequest({
//......
});
其中wait参数为false则不添加loading效果,参考如下:

/**  
 * mui.ajaxRequest  
 * 封装mui.ajax请求,调用方式与一致  
 */  
(function($, doc) {  
    mui.extend({  
        ajaxRequest: function(url , options){  
            var defaults = commonDefaules(options);  
            var options = mui.extend(defaults, options);  
            options.beforeSend = defaults.onBeforeSend;  
            options.success = defaults.onSuccess;  
            options.error = defaults.onError;  
            mui.ajax(url , options);  
        }  
    })  

    function commonDefaules(options){  
        //默认参数定义  
        var defaults = {  
            dataType: "json",  
            type: "post",  
            timeout: 10000,  
            wait: true,  
            waitMessage: "努力奔跑中,等等我...",  
            onBeforeSend : function(xhr){  
                if(defaults.wait == true){  
                    showLoading(defaults.waitMessage);  
                }  
                if(options.beforeSend){  
                    options.beforeSend(xhr);  
                }  
            },  
            onSuccess : function(data){  

                if(defaults.wait == true){  
                    hideLoading();  
                }  
                //也可用于后台验证失败时的提示信息  
                if(data && data.result && (data.result === "input")){  
                    plus.nativeUI.alert(data.message , function(){} , "提示:" , "取消");  
                    return;  
                }  
                if(options.success){  
                    options.success(data);  
                }  
            },  
            onError : function(a , b , c){  
                hideLoading();  
                if(options.error){  
                    options.error(a , b , c);  
                }  
            }  
        };  
        return defaults;  
    }  

    function showLoading(msg){  
        plus.nativeUI.showWaiting(msg , {  
            /*round: "1px", //圆角*/  
            style: "white",  
            back:"none",//不响应返回按钮事件  
            background: "#66CDAA",  
            /*background:"rgba(110,120,50,1)",*/  
            loading:{  
                display:"inline" ,  
                icon:"/images/waiting.png"  
            }  
        });  
    }  

    function hideLoading(){  
        plus.nativeUI.closeWaiting();  
    }  
}(mui, document));
0 关注 分享

要回复文章请先登录注册