很早之前写的代码了,突然觉得值得分享,就有了此文。
这里讲的包装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 个评论
要回复文章请先登录或注册