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

 更新时间:2015年02月05日 10:39:38   投稿:hebedich  
这篇文章主要介绍了封装了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 = {
        ' '   : ' ',
        ' '   : ' ',
        '&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;'   : '÷'
    };
    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: ''
}))

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

相关文章

  • 遍历jquery对象的代码分享

    遍历jquery对象的代码分享

    今天遇到一个问题需要获取tagName,使用jquery,查询了一下,大家说用$("dd").attr("tagName")能获取到,但是得到的返回值是undefined,于是又查询饿了许久,返回遍历了一下jquery封装的对象
    2011-11-11
  • jQuery使用$.each遍历json数组的简单实现方法

    jQuery使用$.each遍历json数组的简单实现方法

    这篇文章主要介绍了jQuery使用$.each遍历json数组的简单实现方法,结合实例形式分析了each方法遍历json数组的实现技巧与相关注意事项,需要的朋友可以参考下
    2016-04-04
  • jQuery实现标签页效果实战(4)

    jQuery实现标签页效果实战(4)

    这篇文章主要为大家详细介绍了jQuery实现标签页效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 初窥JQuery(一)jquery选择符 必备知识点

    初窥JQuery(一)jquery选择符 必备知识点

    JQuery强大的选择符可以让我们获得页面中任何元素进行操作,并且使用简单方便,可读性强。
    2010-11-11
  • jQuery实现购物车计算价格功能的方法

    jQuery实现购物车计算价格功能的方法

    这篇文章主要介绍了jQuery实现购物车计算价格功能的方法,实例分析了jQuery针对html元素的操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • 完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

    完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

    本文是作者学习jQuery之后练手之作,兼容各大浏览器,非常的精美实用,这里放出来给小伙伴们,有需要的直接拿走,别跟我客气^_^
    2014-11-11
  • 从jquery的过滤器.filter()方法想到的

    从jquery的过滤器.filter()方法想到的

    .filter()方法可以接受一个函数作为参数,然后根据函数的返回值判断,这就是jquery选择器的过滤器,下面有个不错的示例,大家可以参考下
    2013-09-09
  • 通过点击jqgrid表格弹出需要的表格数据

    通过点击jqgrid表格弹出需要的表格数据

    在众多的表格插件中,jqgrid的特点是非常鲜明的,所以jqgrid表格插件用处非常广泛,本篇文章给大家介绍通过点击jqgrid表格弹出需要的表格数据,需要的朋友参考下
    2015-12-12
  • jQuery插件jRumble实现网页元素抖动

    jQuery插件jRumble实现网页元素抖动

    jRumble是jquery的插件,可以让你选择的元素抖动。 调用时只需一句代码即可,有些抖动效果还挺可爱,可自定义的抖动效果,十分的炫酷,有需要的小伙伴可以参考下。
    2015-06-06
  • jQuery的事件委托实例分析

    jQuery的事件委托实例分析

    本文通过具体的实例向我们简单介绍了jQuery的事件委托的实现方式,十分的简单实用,有需要的小伙伴可以参考下。
    2015-07-07

最新评论