先看一个基本的JQuery Ajax请求
$.ajax({
url: "", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
data: { "id": "value" }, //参数值
type: "GET", //请求方式
beforeSend: function() {
//请求前的处理
},
success: function(req) {
//请求成功时处理
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});
通过代码可以看到,Jquery 已经为我们做了很好的封装,几行代码就可以实现网络请求访问。作为一个Android狗,看到这样的代码倍感情切。这和Android中的AsyncTask 简直就是失散多年的亲兄弟。一切网络请求前后的通用化处理,返回结果的通用化处理,经过简单的封装,就可以为我们节省大把的开发时间。
封装之前需要先介绍Jquery中的$.extends,类似于Java中的extends。其结构为$.extends(obj1,obj2,....); obj2会覆盖obj1。简单看个例子
var obj1={name: "张三",age: "18",success:function(){}}
var obj2={age: "20",success:function(){ alert("重载方法") }}
var obj3=$.extend(obj1,obj2);
//结果:obj1的age属性被覆盖,而且继承了obj1的name属性,重写了success方法
obj3= {{name: "张三",age: "20",success:function(){ alert("重载方法") }}
利用$.extends封装之后
function aj(opt){
var def={
// flag: 1,
type:"post",
dataType:"json",
data:{},
async:false,
success:function(data){},
beforeSend:function(){}
};
$.extend(def,opt);
$.ajax({
url:url+def.url,
type:def.type,
dataType:def.dataType,
async:def.async,
data:def.data,
success: function(json){
if(json.hasOwnProperty("error")){
alert(json.errorMsg);
}else{
def.success(json);
}
},
beforeSend:function(){
showLoadingDialog();
},
error:function(){
alert("出错了!");
}
complete:function(){
closeLoadingDialog();
}
});
}
在网络请求开始之前,显示正在加载Dialog,网络请求结束,关闭Dialog,对错误结果进行统一处理。来看下使用
function loadData() {
aj({
type : "get",
data : {
aid : aid
},
url : '/active/detail',
success : function(data) {
}
});
}
代码更加清爽简介