Jquery Ajax簡單封裝(集中錯誤、請求loading處理)

時間 2019-12-10

標籤 jquery ajax 簡單封裝集中錯誤請求 loading 處理欄目 JQuery 简体版

原文原文鏈接

Jquery Ajax簡單封裝(集中錯誤、請求loading處理)

對Jquery Ajax作了簡單封裝，錯誤處理，請求loading等，運用到項目中集中處理會很方便。javascript

技術層面沒有什麼好說的，請求是用jquery ajax，彈出層是用layer，你們能夠隨意替換。好比你用weui，也能夠$.toast()等。
用jquery的Deferred來傳遞成功或失敗的狀態。css

/*
*封裝一個本身的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>