【AJAX】封装AJAX之JQuery

77 阅读1分钟

一、AJAX函数封装文件

在项目里设置文件夹api并创建api.js文件,用于封装AJAX

1、BASE_URL:是服务器地址。

2、tokenExit:用于判断token是否存在

3、bacseAjax(option,callbace):封装AJAX的函数

var BASE_URL = 'http://www.codeedu.com.cn'
var tokenExit 
/**
* 基础的ajax请求封装
* @param {Object} option 对请求的配置项(url 、type、data...) 
* @param {Function} callback 请求成功回调函数
*/
function baseAjax(option = {
    url: '',
    type: 'GET',
    data: {},
    contentType: "",
    headers: {}
}, callback) {
    $.ajax({
        //请求地址
        url: BASE_URL + option.url,
        //请求类型
        type: option.type,
        //请求头,一般放token
        headers: option.headers,
        //发送数据
        data: option.type === "POST" ? JSON.stringify(option.data) : option.data,
        //请求内容类型
        contentType: option.type === "POST" ? "application/json;charset=utf-8" : "application/x-www-form-urlencoded;charset=utf-8",
        success: function (res) {
            //参数异常处理
            if ((typeof callback) !== 'function') return console.error('传参非函数')
            //请求数据处理
            if (res.code === 200) {
            //回调响应数据
                callback(res)
            } else {
                console.error(res);
            }
        },
        error: function (error) {
            alert('错误')
            console.error(error)
        }
    })
}

二、调用AJAX

html里先引入api.js文件

baseAjax({
        url: 'url',
        headers: {
            Authorization: $.cookie('token')
        },
        type:'GET',
        data:{}
        ...
    }, function (res) {
        //res是ajax回调得到的响应数据
    })