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>