ajax
ajax请求封装(基于jquery)
/**
* ajax请求封装
* @param method 请求方式
* @param url api地址
* @param data 参数
* @param success 请求成功的回调
* @param error 请求错误的回调
*/
function ajax(method, url, data, success, error) {
var default_config = {
url: domain.main + url,
dataType: "json",
async: false,
data: data,
type: method || 'GET',
cache: false,
headers: {
'X-Token': localStorage.token
},
crossDomain: true,
// 请求前的处理
beforeSend: function () {
},
success: function (data) {
success = typeof success === 'function' ? success : function (err) {
};
success(data);
},
complete: function (data) {
var res;
res = JSON.parse(data.responseText);
if (data.status == '200') {
data.success(res);
} else {
data.error(data.status, data.statusText, res);
}
},
error: function (err_data, err_id, err) {
if (err_data.status == '401' && JSON.parse(err_data.responseText).meta.message == "登录验证失败") {
console.log(JSON.parse(err_data.responseText).meta.message + ',请重新登录');
localStorage.clear();
layui.use('layer', function () {
var layer = layui.layer;
layer.open({
content: JSON.parse(err_data.responseText).meta.message + ',请重新登录',
btn: ['确认'],
yes: function (index) {
var url = window.location.href;
localStorage.url = url;
location.href = "/views/sign/signin.html?sign=signin";
}
});
});
} else if (err_data.status == '400') {
console.log('错误信息:400,', JSON.parse(err_data.responseText).meta.message);
layer.open({
content: '错误信息:400,' + JSON.parse(err_data.responseText).meta.message,
skin: 'msg',
time: 2
})
} else if (err_data.status == '404') {
console.log('错误信息:404,', JSON.parse(err_data.responseText).meta.message);
layer.open({
content: '错误信息:404,请求超时,请重试',
skin: 'msg',
time: 2
})
} else if (err_data.status == '500') {
console.log('错误信息:500,服务器出错,请稍后再试' + JSON.parse(err_data.responseText).meta.message);
layer.open({
content: '错误信息:500,服务器出错,请稍后再试',
skin: 'msg',
time: 2
})
layer.alert(JSON.parse(err_data.responseText).meta.message);
} else if (err_data.status == '502') {
console.log('错误信息:502,服务器出错,请稍后再试' + JSON.parse(err_data.responseText).meta.message);
layer.open({
content: '错误信息:502,服务器出错,请稍后再试',
skin: 'msg',
time: 2
})
}
error = typeof error === 'function' ? error : function (err) {
};
error(err_data.status, err_id, err);
}
};
$.ajax(default_config);
}
90
1
/**
2
* ajax请求封装
3
* @param method 请求方式
4
* @param url api地址
5
* @param data 参数
6
* @param success 请求成功的回调
7
* @param error 请求错误的回调
8
*/
9
function ajax(method, url, data, success, error) {
10
var default_config = {
11
url: domain.main + url,
12
dataType: "json",
13
async: false,
14
data: data,
15
type: method || 'GET',
16
cache: false,
17
headers: {
18
'X-Token': localStorage.token
19
},
20
crossDomain: true,
21
// 请求前的处理
22
beforeSend: function () {
23
},
24
success: function (data) {
25
success = typeof success === 'function' ? success : function (err) {
26
};
27
success(data);
28
},
29
complete: function (data) {
30
var res;
31
res = JSON.parse(data.responseText);
32
if (data.status == '200') {
33
data.success(res);
34
} else {
35
data.error(data.status, data.statusText, res);
36
}
37
},
38
error: function (err_data, err_id, err) {
39
if (err_data.status == '401' && JSON.parse(err_data.responseText).meta.message == "登录验证失败") {
40
console.log(JSON.parse(err_data.responseText).meta.message + ',请重新登录');
41
localStorage.clear();
42
layui.use('layer', function () {
43
var layer = layui.layer;
44
layer.open({
45
content: JSON.parse(err_data.responseText).meta.message + ',请重新登录',
46
btn: ['确认'],
47
yes: function (index) {
48
var url = window.location.href;
49
localStorage.url = url;
50
location.href = "/views/sign/signin.html?sign=signin";
51
}
52
});
53
});
54
} else if (err_data.status == '400') {
55
console.log('错误信息:400,', JSON.parse(err_data.responseText).meta.message);
56
layer.open({
57
content: '错误信息:400,' + JSON.parse(err_data.responseText).meta.message,
58
skin: 'msg',
59
time: 2
60
})
61
} else if (err_data.status == '404') {
62
console.log('错误信息:404,', JSON.parse(err_data.responseText).meta.message);
63
layer.open({
64
content: '错误信息:404,请求超时,请重试',
65
skin: 'msg',
66
time: 2
67
})
68
} else if (err_data.status == '500') {
69
console.log('错误信息:500,服务器出错,请稍后再试' + JSON.parse(err_data.responseText).meta.message);
70
layer.open({
71
content: '错误信息:500,服务器出错,请稍后再试',
72
skin: 'msg',
73
time: 2
74
})
75
layer.alert(JSON.parse(err_data.responseText).meta.message);
76
} else if (err_data.status == '502') {
77
console.log('错误信息:502,服务器出错,请稍后再试' + JSON.parse(err_data.responseText).meta.message);
78
layer.open({
79
content: '错误信息:502,服务器出错,请稍后再试',
80
skin: 'msg',
81
time: 2
82
})
83
}
84
error = typeof error === 'function' ? error : function (err) {
85
};
86
error(err_data.status, err_id, err);
87
}
88
};
89
$.ajax(default_config);
90
}
原生js的ajax封装
/* 封装ajax函数
* @param {string}opt.type http连接的方式,包括POST和GET两种方式
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
* @param {object}opt.data 发送的参数,格式为对象类型
* @param {function}opt.success ajax发送并接收成功调用的回调函数
*/
function ajax(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || 'POST';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
var params = [];
for (var key in opt.data) {
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
}
};
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
}
5
1
xmlHttp.onreadystatechange = function () {
2
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
3
opt.success(xmlHttp.responseText);
4
}
5
}