Jquery Ajax简单封装(集中错误、请求loading处理)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

对Jquery Ajax做了简单封装，错误处理，请求loading等，运用到项目中集中处理会很方便。

技术层面没有什么好说的，请求是用jquery ajax，弹出层是用layer，大家可以随意替换。比如你用weui，也可以$.toast()等。
用jquery的Deferred来传递成功或失败的状态。

/*
*封装一个自己的ajax函数
*有5个参数，最后一个参数可选
*
* @param method(必选) 请求类型 get 和 post
* @param url(必选) 请求的url地址相同域名下的页面（此函数不支持跨域请求）
* @param data(必选) 请求协带的数据以js对象的形式定义，如：{name:'张三'}
* @param callback(必选) 回调函数,可接收一个参数，这个参数就是服务器响应的数据
* @param type(可选) 指定服务器响应的数据类型（可选值：json,xml,text），如果是json模式，则使用json解析数据，默认为text普通字符串
*/
//在一个js文件中引入另一个js文件
var new_element = document.createElement("script");
new_element.setAttribute("type", "text/javascript");
new_element.setAttribute("src", "https:////layui.hcwl520.com.cn/layui/layui.js?v=201811010202");
document.body.appendChild(new_element);// js中引入一个css文件
var css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'https://layui.hcwl520.com.cn/layui/css/layui.css?v=201811010202';
document.head.appendChild(css);function myAjax(method, url, data, callback, type) {
var baseUrl = "xxxxx";
url = baseUrl + url
// 登录信息
var login = sessionStorage.getItem("LoginUser");
if (login != null) {
var loginList = JSON.parse(sessionStorage.getItem("LoginUser"))
// 用户token
var token = loginList.token_sc
}
//创建兼容 XMLHttpRequest 对象
var xhr;
if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} //给请求添加状态变化事件处理函数
xhr.onreadystatechange = function () {
//判断状态码
if (xhr.status == 200 && xhr.readyState == 4) {
//根据type参数，判断返回的内容需要进行怎样的处理
if (type == 'json') {
//获得 json 形式的响应数据，并使用parse方法解析
var res = JSON.parse(xhr.responseText);
} else if (type == 'xml') {
//获得 XML 形式的响应数据
var res = responseXML;
} else if (type == 'str') {
//获得字符串形式的响应数据
var res = xhr.responseText;
} else {
//获得 json 形式的响应数据，并使用parse方法解析
var res = JSON.parse(xhr.responseText);
}
//调用回调函数,并将响应数据传入回调函数
callback(res); var xhrObj = JSON.parse(xhr.response)
// console.log(xhrObj.error_code)
// 回调状态码，根据具体情况来，可以做一些集中loading处理之类的
layui.use('layer', function () {
//loading层
var loading = layer.load(2, {
shade: [0.1, '#fff'], //0.1透明度的白色背景
});
if (xhrObj.error_code === 2011) {
layer.close(loading);
layer.msg(xhrObj.message, {
icon: 5
});
} else if (xhrObj.error_code === 1100) {
layer.close(loading);
layer.msg(xhrObj.message, {
icon: 5
});
} else if (xhrObj.error_code === 0) {
layer.close(loading);
}
}); }
}; //判断data是否有数据
var param = '';
//这里使用stringify方法将js对象格式化为json字符串
if (JSON.stringify(data) != '{}') {
url += '?';
for (var i in data) {
param += i + '=' + data[i] + '&'; //将js对象重组，拼接成url参数存入param变量中
}
//使用slice函数提取一部分字符串，这里主要是为了去除拼接的最后一个&字符
//slice函数：返回一个新的字符串。包括字符串从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
param = param.slice(0, param.length - 1);
} //判断method是否为get
if (method == "get") {
//是则将数据拼接在url后面
url = url + param;
} //初始化请求
xhr.open(method, url, true); //如果method == post
if (method == "post") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送请求
xhr.send(param);
} else {
//发送请求
xhr.send(null);
}}

调用实例（引入上面代码）：

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title></head><body>
<div>
<input type="text" placeholder="手机号" id="phone">
<input type="password" placeholder="密码" id="pass">
<button onclick="login()">登录</button>
</div>
<script src="./lib/js/jquery-3.4.0.min.js"></script>
<script src="./config/api.js"></script>
<script>
function login() {
var phone = $('#phone').val()
var pass = $('#pass').val()
console.log("登录中..." + "手机号：" + phone)
console.log("登录中..." + "密码：" + pass)
myAjax('post', '/members/login', { phone: phone, pass: pass }, function (res) {
console.log(res);
}); }
</script>
</body></html>