Angbike个人博客 > JavaScript/JQuery > Ajax简单封装及调用

Ajax简单封装及调用

Ajax简单封装及调用,包含基本ajax请求(表单及json方式)。

封装ajax代码:

common = {

    /**
     * 公用ajax请求函数
     * @param {Object} types            请求类型
     * @param {Object} urls                请求地址
     * @param {Object} header             请求头信息
     * @param {Object} dataTypes        数据类型
     * @param {Object} asyncs            请求方式
     * @param {Object} datas            请求数据
     * @param {Object} beforeSends        发送请求    
     * @param {Object} callbacks        请求成功回调
     * @param {Object} errors            请求出错
     * @param {Object} completes        请求完成
     */
    json_ajax: function(types, urls, header, dataTypes, asyncs, datas, beforeSends, callbacks, errors, completes){
        $.ajax({
            type: types
            ,url: urls
            ,headers: header
            ,dataType: dataTypes
            ,async: asyncs
            ,data: datas                
            ,beforeSend: beforeSends
            ,success: callbacks
            ,error: errors
            ,complete: completes
        });
    },
    
    /**
     * 公用ajax请求函数(提交表单对象)
     * @param {Object} types            请求类型
     * @param {Object} urls                请求地址
     * @param {Object} header             请求头信息
     * @param {Object} dataTypes        数据类型
     * @param {Object} asyncs            请求方式
     * @param {Object} datas            请求数据
     * @param {Object} beforeSends        发送请求    
     * @param {Object} callbacks        请求成功回调
     * @param {Object} errors            请求出错
     * @param {Object} completes        请求完成
     */
    json_ajax_form: function(types, urls, header, dataTypes, asyncs, datas, beforeSends, callbacks, errors, completes){
        $.ajax({
            type: types
            ,url: urls
            ,cache: false // 不缓存
            ,processData: false // jQuery不要去处理发送的数据
            ,contentType: false
            ,headers: header
            ,dataType: dataTypes
            ,async: asyncs
            ,data: datas                
            ,beforeSend: beforeSends
            ,success: callbacks
            ,error: errors
            ,complete: completes
        });
    },
    
    /**
     * 公用ajax请求函数(提交json数据)
     * @param {Object} types            请求类型
     * @param {Object} urls                请求地址
     * @param {Object} header             请求头信息
     * @param {Object} dataTypes        数据类型
     * @param {Object} asyncs            请求方式
     * @param {Object} datas            请求数据
     * @param {Object} beforeSends        发送请求    
     * @param {Object} callbacks        请求成功回调
     * @param {Object} errors            请求出错
     * @param {Object} completes        请求完成
     */
    json_ajax_type: function(types, urls, header, dataTypes, asyncs, datas, beforeSends, callbacks, errors, completes){
        $.ajax({
            type: types
            ,url: urls
            ,contentType: "application/json"
            ,headers: header
            ,dataType: dataTypes
            ,async: asyncs
            ,data: datas                
            ,beforeSend: beforeSends
            ,success: callbacks
            ,error: errors
            ,complete: completes
        });
    },
    
}

1、json_ajax函数基本调用:

let URL = '/test/interface';
let parameter = {
    'id': 1222545
}
common.json_ajax("POST", URL, header, "json", true, parameter, null, function(res){
    // 请求成功回调
    if(res.code == 200){
    
    }else{
    
    }
}, null, null);

2、json_ajax_form表单提交调用

let URL = '/test/interface';
let formData = new FormData();
formData.append("id", 1222545);
common.json_ajax_form("POST", URL, header, "json", true, formData, null, function(res){
    // 请求成功回调
    if(res.code == 200){
    
    }else{
    
    }
}, null, null);

3、json_ajax_type提交json数据

let testJsons = {
    'allergy': 111,
    'chronicDisease': 222,
    'consultor': 333,
}
let parameter = JSON.stringify(testJsons);
common.json_ajax_type("POST", URL, header, "json", true, parameter, null, function(res){
    // 请求成功回调
    if(res.code == 200){
    
    }else{
    
    }
}, null, null);

博客评论已关闭