首頁 > web前端 > js教程 > 主體

封裝了jQuery的Ajax請求全域配置_jquery

WBOY
發布: 2016-05-16 16:15:50
原創
1430 人瀏覽過

摘要:

  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);
            }

        },
        錯誤:函數(xhr,狀態,處理程序){
            if (opt.error)
                opt.error();
        }
    };
};
函數 unescapeEntity(str) {
var reg = /&(?:nbsp|#160|lt|#60|gt|62|amp|#38|quot|#34|分|#162|英鎊|#163|日元|#165|歐元| # 8364|宗|#167|複製|#169|reg|#174|交易|#8482|次|#215|分割|#247);/g,
        實體= {
        ' '   : ' ',
        ' '   : ' ',
        '         '         '>'     : '>',
        '&62;'     : '>',
        '&'    : '&',
        '&'    : '&',
        '"'   : '"',
        '"'    : '"',
        '¢'   : '¢',
        '¢'   : '¢',
        “£”:“£”,
        '£'   : '£',
        '¥'    : '¥',
        '¥'   : '¥',
        '€'   : '?',
        '€' : '?',
        '§'   : '§',
        '§'   : '§',
        '©'   : '©',
        '©'   : '©',
        '®'    : '®',
        '®'   : '®',
        '™' :'™',
        '™' :'™',
        '×'  : '×',
        '×'   : '×',
        '÷' : '÷',
        '÷'   : '÷'
    };
    if (str === null) {
        返回 '';
    }
    str = str.toString();
    回傳 str.indexOf(';')         返回實體[字元];
    });
}
// 轉換html的實體
$.ajaxSetup({
    全域     :正確,
    快取      : false,
    轉換器:{
        'text json' : 函數(反應){
            返回 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 === '燙髮錯誤' && !json.success){
            window.location.href = location.protocol '//' location.hostname;
            返回;
        }
        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: ''
}))

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板