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


Posted in Javascript onFebruary 05, 2015

摘要:

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: ''

}))

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

Javascript 相关文章推荐
表单提交验证类
Jul 14 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
vue实现简单瀑布流布局
May 28 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
node.js集成百度UE编辑器
Feb 05 #Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 #Javascript
JavaScript计时器示例分析
Feb 05 #Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 #Javascript
使用pjax实现无刷新更改页面url
Feb 05 #Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 #Javascript
jquery手风琴特效插件
Feb 04 #Javascript
You might like
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
php多文件上传实现代码
2014/02/20 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
100行代码实现一个vue分页组功能
2018/11/06 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
[原创]pip和pygal的安装实例教程
2017/12/07 Python
如何利用python查找电脑文件
2018/04/27 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
python入门教程之基本算术运算符
2020/11/13 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
什么是封装
2013/03/26 面试题
新教师工作感言
2014/02/16 职场文书
职务聘任书范文
2014/03/29 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
个人查摆剖析材料
2014/10/04 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
2022漫威和DC电影上映作品
2022/04/05 欧美动漫