Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 16:15:50
Original
1369 people have browsed it

摘要:

  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(';')         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: ''
}))

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!