cookie.js ,ajax.js , api.js

// 存储cookie的函数
function setCookie(key, val, day, path = "/") {
    // 当前时间
    var date = new Date();
    // 到期时间
    date.setDate(date.getDate() + day);
    // 如果有值，设置过期时间
    if (day) {
        document.cookie = key + "=" + val + ";expires=" + date.toUTCString() + ";path=" + path;
    } else { // 如果没有值，不设置过期时间
        document.cookie = key + "=" + val + ";path=" + path;
    }
}

// 获取cookie的函数
function getCookie(key) {
    // 先获取cookie
    var cookie = document.cookie;
    if (cookie) {
        // 将获取的cookie第一次拆分
        var arr1 = cookie.split("; "); // 键值对类型的数组

        // 循环遍历数组
        for (let i = 0; i < arr1.length; i++) {
            // 拿到键值对
            const item = arr1[i];
            // 第二次拆分
            var arr2 = item.split("=");// 拆分键值对
            // 获取键名和键值
            var keys = arr2[0];
            var val = arr2[1];
            // 判断传入的键名和cookie的键名
            if (keys == key) {
                // 返回对应键名下的键值
                return val;
            }
        }
    } else {
        return "";
    }
}

// 封装删除cookie的方法
function delCookie(key) {
    setCookie(key, '', -1)
}

// function get(url, data, async = true, dataType, success){
//     var xhr = new XMLHttpRequest();
//     xhr.open("get", url + "?" + data, async);
//     xhr.send();
//     xhr.onreadystatechange = function(){
//         if(xhr.readyState == 4 && xhr.status == 200){
//             var result = xhr.responseText;
//             if(dataType.toLowerCase() === "json"){
//                 result = JSON.parse(xhr.responseText);
//             }
//             // 请求成功 且有回调函数时执行
//             if(success){
//                 success(result); // 将result作为实参
//             }
//         }
//     }
     
// }

// 缺点 
// 1. 形式参数和实际参数 必须一一对应(不能交换顺序)
// 2. 参数默认时 也不能省略

// 解决方案
// 将所有的参数整合成一整个对象{url, data, async, dataType, success}
// (对象键名取值 排名不分先后，取值取不到就返回undefined)

// function get(options){
//     var{url, data = "", async = true, dataType = "text", success} = options
//     var xhr = new XMLHttpRequest();
//     xhr.open("get", url + "?" + data, async);
//     xhr.send();
//     xhr.onreadystatechange = function(){
//         if(xhr.readyState == 4 && xhr.status == 200){
//             var result = xhr.responseText;
//             if(dataType.toLowerCase() === "json"){
//                 result = JSON.parse(xhr.responseText);
//             }
//             // 请求成功 且有回调函数时执行
//             if(success){
//                 success(result); // 将result作为实参
//             }
//         }
//     }
     
// }

// 问题2: data传入的数据还需要自己手动拼接 => 麻烦
// 参数以键值对的形式存在(key = val) 排名不分先后
// 允许传入一个对象 自动拼接为 参数数据队列

// function get(options){
//     var{url, data = "", async = true, dataType = "text", success} = options

//     if(typeof data == "object" ){ // 如果是对象 转为 字符串(参数数据队列)
//         var arr = [];
//         for(var key in data){
//             var val = data[key];
//             arr.push(key + "=" + val);
//         }
//         data = arr.join("&");
//     }

//     var xhr = new XMLHttpRequest();
//     xhr.open("get", url + "?" + data, async);
//     xhr.send();
//     xhr.onreadystatechange = function(){
//         if(xhr.readyState == 4 && xhr.status == 200){
//             var result = xhr.responseText;
//             if(dataType.toLowerCase() === "json"){
//                 result = JSON.parse(xhr.responseText);
//             }
//             // 请求成功 且有回调函数时执行
//             if(success){
//                 success(result); // 将result作为实参
//             }
//         }
//     }
     
// }

// 最终版(get,post合二为一)
function ajax(options){
    var{type = "get", url, data = "", async = true, dataType = "text", success} = options

    if(typeof data == "object" ){ // 如果是对象 转为 字符串(参数数据队列)
        var arr = [];
        for(var key in data){
            var val = data[key];
            arr.push(key + "=" + val);
        }
        data = arr.join("&");
    }

    var xhr = new XMLHttpRequest();
    // 判断请求类型
    if(type.toLowerCase() == "get"){
        xhr.open("get", data ? url + "?" + data : url, async);
        xhr.send();
    }else if(type.toLowerCase() == "post"){
        xhr.open("post", url, async);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            var result = xhr.responseText;
            if(dataType.toLowerCase() === "json"){
                result = JSON.parse(xhr.responseText);
            }
            // 请求成功 且有回调函数时执行
            if(success){
                success(result); // 将result作为实参
            }
        }
    }
     
}

//  模拟jquery的$.ajax的封装
var $ = {};
$.ajax = ajax;

// ajax二次封装的请求函数
function request(url, params, type = "get") {
    return new Promise(function (resolve) {
        $.ajax({
            type: type,
            url: url,
            data: { ...params },
            dataType: "json",
            success: function (result) {
                resolve(result);
            }
        })
    })
}

// 接口不同，进行三次封装

// 注册验证接口
function register(params) { return request("../php/register.php", params) }

// 注册插入接口
function insert(params) { return request("../php/insert.php", params) }

// 登录接口
function login(params) { return request("../php/login.php", params, "post") }

// 删除接口
const deleteGrade = params => request("../php/deleteGrade.php", params);

// 根据Id查询接口
const searchGradeById = params => request("../php/searchGradeById.php", params);

// 更新数据接口
const updateGradeById = params => request("../php/updateGradeById.php", params);

// 前端搜索，排序和限制页数接口
const searchAllGradesOrder = params => request("../php/searchAllGradesOrder.php", params);

// 前端搜索，排序和限制页数接口
const searchGradeOrderLimit = params => request("../php/searchGradeOrderLimit.php", params);