使用jQuery的ajax进行网络请求,一般会先对它进行封装,封装成便于管理的形式。
我一般的封装如下:
/**
* mock数据
*/
var myData = {
getData: [
{
"itemTitle": "测试用文字标题一",
"itemSubTitle": "P0000000123456",
"leftContentOne": "生效日期",
"leftContentTwo": "2018-12-30",
"rightContentOne": "上传日期",
"rightContentTwo": "2018-12-30"
}, {
"itemTitle": "测试用文字标题二",
"itemSubTitle": "P0000000123456",
"leftContentOne": "生效日期",
"leftContentTwo": "2018-12-30",
"rightContentOne": "上传日期",
"rightContentTwo": "2018-12-30"
}
]
}
/**
* ajax请求封装
*/
var dataRequest = {
request: function (opts) {
// var _myData = myData[opts.key];
// opts.callback(_myData);
// return;
$.ajax({
url: this.urls[opts.key] || "",
data: opts.data || {},
type: opts.type || "get",
dataType: opts.dataType || "json",
async: opts.async !== false,
beforeSend: function () {
},
success: function (res) {
opts.callback(res);
},
error: function (err) {
console.log(err);
}
})
},
urls: {
"getData": "/SL_LES/biapp/policy/needSuppPolicys.do",
"getData2": "/SL_LES/biapp/policy/needSuppPolicys.do",
"getData3": "/SL_LES/biapp/policy/needSuppPolicys.do"
}
}
而平常我们在前端与后端进行对接的时候,后端在没有写好接口的情况下,我们可以先进行数据的mock,mock的数据和真正的ajax请求代码可以放在一起,只要在正式测试接口的时候注释掉mock数据的那一部分即可(如上注释部分)。
而在实际的ajax请求时,只要给定封装ajax时指定的对象选项即可:
// 初始化请求数据
dataRequest.request({
key: "getData",
type: "POST",
callback: function (dd) {
console.log("页面初始化数据", dd);
if (!dd) {
//......
return;
}
myTab.initData = dd;
}
});
说明:这样的处理方式使得url的管理要方便很多,而且只要后台给出mock数据的格式即可mock数据,正式的接口对接时注释掉mock数据部分,使用真正的ajax请求。