jQuery Ajax 封装

JavaScript options 参数使用

参考文章：JavaScript - 使用 options objects 构建函数介绍

对 jQuery Ajax 进行二次封装

原函数：data.js

$.ajax({
    url: 'json/course.json', // json 文件地址
    type: "get", // 数据传输方式
    dataType: "json", // 获取文件类型，非必要
    // 若 json 文件获取失败激活此函数
    error: function () {
        console.log("error!"); // 检验函数激活，排除 bug
    },
    // 若 json 文件获取成功激活此函数
    success: function (data) {
        var str = ""; // 提前声明字符串变量
        /* 循环遍历 data，得到参数 dataItem（遍历单元，参数名称可自定义） */
        $.each(data, function (index, dataItem) {
            str += `<a href='#'>
                <div class="course-state">${dataItem.label}</div>
                <div class='img-nav'>
                <img src="${dataItem.imgUrl}" alt=''>
                </div>
                <div class="course-name">${dataItem.title}</div>
                <div class="card-info">
                <span class="l">${dataItem.info.level}</span>
                <span class="l">${dataItem.info.people}</span>
                <span class="l">${dataItem.info.comments}</span>
                </div>
                <div class="price">
                <span>${dataItem.price}</span>
                ${dataItem.countdown ? '<span class="price-tip">限时优惠</span>' : ''}
                </div>
            </a>`; // 完成 str 的添加，使用 ES6 模板字符串引用参数，可以实现判断语句
        });
        // jQuery 选择器定位添加位置，append() 函数在末尾添加，html() 覆盖添加
        $(".main-course .course-card-list").append(str);
    }
});

封装函数：ajax.util.js

function ajax(
    options = {
        type: "post", // 数据传输方式
        data: {},
        dataType: "json", // 获取文件类型，非必要
        async: true, // 异步执行
        beforeSend: function () {}, // 调用前的回调函数
        success: function () {}, // 成功的回调函数
        error: function () { // 失败的回调函数
            console.log("error!");
        },
        complete: function () { // 完成后的回调函数
            console.log("complete!");
        },
    }
) {
    var url = `json/${options.url}.json`; // json 文件地址

    if (options.dataType === 'jsonp') {
        options.dataType = 'jsonp';
    }

    options.success = function (data) { // 若 json 文件获取成功激活此函数
        console.log("json data - success!");
        var str = ""; // 提前声明字符串变量
        /**
         * 循环遍历 data，得到参数 dataItem（遍历单元，参数名称可自定义）
         * 完成 str 的添加，使用 ES6 模板字符串引用参数，可以实现判断语句
         * eg. ${dataItem.countdown ? '<span class="price-tip">限时优惠</span>' : ''}
         */
        str = options.getFinalStr(data, str);
        // jQuery 选择器定位添加位置，append() 函数在末尾添加，html() 覆盖添加
        $(options.selector).append(str);
    }

    $.ajax({
        'url': url,
        'data': options.data,
        'type': options.type,
        'dataType': options.dataType,
        'async': options.async,
        'beforeSend': options.beforeSend,
        'success': options.success,
        'error': options.error,
        'complete': options.complete,
        'jsonpCallback': 'jsonp' + (new Date()).valueOf().toString().substr(-4),
    });
}

函数调用：data.js

ajax({
    url: "course",
    getFinalStr: function (data, str) {
        $.each(data, function (index, dataItem) {
            str += `<a href='#'>
                    <div class="course-state">${dataItem.label}</div>
                    <div class='img-nav'>
                    <img src="${dataItem.imgUrl}" alt=''>
                    </div>
                    <div class="course-name">${dataItem.title}</div>
                    <div class="card-info">
                    <span class="l">${dataItem.info.level}</span>
                    <span class="l">${dataItem.info.people}</span>
                    <span class="l">${dataItem.info.comments}</span>
                    </div>
                    <div class="price">
                    <span>${dataItem.price}</span>
                    ${dataItem.countdown ? '<span class="price-tip">限时优惠</span>' : ''}
                    </div>
                </a>`;
        });
        return str;
    },
    selector: ".main-course .course-card-list",
});