AJAX封装-2
Posted WEB学习小助手
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX封装-2相关的知识，希望对你有一定的参考价值。
1、简单介绍：
本篇文章介绍项目当中是如何对ajax方法封装后再使用的。提供了两种封装方法，第一种偏于简单的封装，传递的参数比较多。第二种全面封装，只传递了一个参数是对象格式。具体可以看如下的调用方法是如何传递的。
2、具体封装：
方法一:
var _common = {
ajaxFun: function (type, url, data, suc, error, boolean) {
$.ajax({
type: type,
data: JSON.stringify(data),
dataType: "json",
contentType: 'application/json;charset=utf-8',
success: function (data) {
if (data.code == 1002) {
//window.location.href =boolean?"./login/login.html":"../login/login.html"
} else {
suc(data)
}
},
error: error
});
},
}
调用ajax方法：
_common.ajaxFun("get", "/server/getList/" +token + "/" +userid, "", FSuccess, error);
_common.ajaxFun("post", "/server/getList/", params, FSuccess, error)
方法二：
var _common = {
/**
* ajax请求方法封装
* **/
getajax:function(option){
var opt = {
url:'',
type:'GET',
data: '',
contentType: 'application/json;charset=UTF-8',
dataType: 'json',
async: true,
cache: false,
beforeSend:function(){ }, //发送请求前运行的函数
success:function(){ }, //请求成功回调
error:function(){ }, //请求失败回调
complete: function () {} //成功和失败都调用的方法
}
opt = $.extend({},opt,option);
$.ajax({
type: 'GET', //请求类型
data: JSON.stringify(opt.data), //请求数据
contentType: 'application/json;charset=UTF-8', //发送数据的类型
dataType: opt.dataType, //服务器返回的数据类型
async: opt.async, //是否异步请求
cache: opt.cache, //是否请求get缓存结果
timeout:2000, //设置本地的请求超时的时间，单位ms
beforeSend:function(){
opt.beforeSend
},//发送请求前运行的函数
success:function(res){
opt.success();
},//请求成功回调
error:function(e){
opt.error();
}, //请求失败回调
complete: function (XMLHttpRequest, status) {
opt.complete();
} //成功和失败都调用的方法
})
}
}
调用ajax方法：
get请求：
_common.getAjax({
url: '/server/getList/' + token + "/" + userid ,
type: 'GET',
success: function (res) {
if (res.code == '1000') {
}
},
error:function(){
console.log("网络连接异常");
}
})
post请求：
var params= {token:'123344', userid:'001'}
_common.getAjax({
url: '/server/getList/',
type: 'POST',
data: params,
success: function (res) {
if (res.code == '1000') {
console.log("请求成功");
}
}
})
以上是关于AJAX封装-2的主要内容，如果未能解决你的问题，请参考以下文章