封装了jQuery的Ajax请求全局配置

摘要：

jQuery已经成为项目中最常见的js库，也是前端开发最喜欢使用的库。下面是在项目中封装了jQuery的Ajax，分享给大家。

代码：

// ajax 请求参数

var ajaxSettings = function(opt) {

    var url = opt.url;

    var href = location.href;

    // 判断是否跨域请求

    var requestType = 'jsonp';

    if (url.indexOf(location.host) > -1)

        requestType = 'json';

    requestType = opt.dataType || requestType;

    // 是否异步请求

    var async = (opt.async === undefined ? true : opt.async);

    return {

        url: url,

        async: async,

        type: opt.type || 'get',

        dataType: requestType,

        cache: false,

        data: opt.data,

        success: function(data, textStatus, xhr) {

            /*

            *如果dataType是json，怎判断返回数据是否为json格式，如果不是进行转换

            * 成功数据通用格式

            *   {

            *       "code": 200,

            *       "data": [], 

            *       "success": true // 成功

            *   }

            *   失败返回的数据

            *   {

            *       "code": 200, 

            *       "info": 'error', 

            *       "success": false // 失败

            *   }

             */

            if((requestType === 'json' || requestType === "jsonp") && typeof(data) === "string") {

                data = JSON.parse(data);

            }

            if(data.success) {

                opt.success(data);

            }
            if(opt.error) {

                opt.error(data);

            }
        },

        error: function(xhr, status, handler) {

            if (opt.error)

                opt.error();

        }

    };

};

function unescapeEntity(str) {

    var reg = /&(?:nbsp|#160|lt|#60|gt|62|amp|#38|quot|#34|cent|#162|pound|#163|yen|#165|euro|#8364|sect|#167|copy|#169|reg|#174|trade|#8482|times|#215|divide|#247);/g,

        entity = {

        ' '   : ' ',

        ' '   : ' ',

        '<'     : '<',

        '<'    : '<',

        '>'     : '>',

        '&62;'     : '>',

        '&'    : '&',

        '&'    : '&',

        '"'   : '"',

        '"'    : '"',

        '¢'   : '￠',

        '¢'   : '￠',

        '£'  : '£',

        '£'   : '£',

        '¥'    : '¥',

        '¥'   : '¥',

        '€'   : '?',

        '€'  : '?',

        '§'   : '§',

        '§'   : '§',

        '©'   : '©',

        '©'   : '©',

        '®'    : '®',

        '®'   : '®',

        '™'  : '™',

        '™'  : '™',

        '×'  : '×',

        '×'   : '×',

        '÷' : '÷',

        '÷'   : '÷'

    };

    if (str === null) {

        return '';

    }

    str = str.toString();

    return str.indexOf(';') < 0 ? str : str.replace(reg, function(chars) {

        return entity[chars];

    });

}

// 转换html的实体

$.ajaxSetup({

    global     : true,

    cache      : false,

    converters : {

        'text json' : function(response){

            return jQuery.parseJSON(unescapeEntity(response));

        }

    }

});

/*

*Ajax 请求权限异常

*   用户权限错误跳转登陆页

*   404错误跳转404页面

 */

$(document).ajaxComplete(function(evt, req, settings){

    if(req && req.responseJSON){

        var json = req.responseJSON;

        if(json.code === 403 && json.info === 'perm error' && !json.success){

            window.location.href = location.protocol + '//' + location.hostname;

            return;

        }

        if(json.code === 404 && !json.success) {

            window.location.href = location.protocol + '//' + location.hostname + '/404.html';

        }

    }

});

/*

*Ajax 请求错误提示

*例如：500错误

*返回错误信息格式

*{

*   code: 500,

*   info: 系统发生异常

*}

 */

$(document).ajaxError(function(evt, req, settings){

    if(req && (req.status === 200||req.status === 0)){ return false; }

    var msg = '错误：';

    if(req && req.responseJSON){

        var json = req.responseJSON;

        msg += json.code||'';

        msg += json.info||'系统异常，请重试';

    }else{

        msg = '系统异常，请重试';

    }

    alert(msg);

});

小结：

在执行Ajax请求时只需要调用ajaxSettings函数即可，如下：

$.ajax(ajaxSettings({

    url: '',

    data: ''

}))

以上所述就是本文的全部内容了，希望大家能够喜欢。