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;‘     : ‘<‘,
        ‘<‘    : ‘<‘,
        ‘&gt;‘     : ‘>‘,
        ‘&62;‘     : ‘>‘,
        ‘&amp;‘    : ‘&‘,
        ‘&‘    : ‘&‘,
        ‘&quot;‘   : ‘"‘,
        ‘"‘    : ‘"‘,
        ‘&cent;‘   : ‘¢‘,
        ‘¢‘   : ‘¢‘,
        ‘&pound;‘  : ‘£‘,
        ‘£‘   : ‘£‘,
        ‘&yen;‘    : ‘¥‘,
        ‘¥‘   : ‘¥‘,
        ‘&euro;‘   : ‘€‘,
        ‘€‘  : ‘€‘,
        ‘&sect;‘   : ‘§‘,
        ‘§‘   : ‘§‘,
        ‘&copy;‘   : ‘©‘,
        ‘©‘   : ‘©‘,
        ‘&reg;‘    : ‘®‘,
        ‘®‘   : ‘®‘,
        ‘&trade;‘  : ‘™‘,
        ‘™‘  : ‘™‘,
        ‘&times;‘  : ‘ב,
        ‘ב   : ‘ב,
        ‘&divide;‘ : ‘÷‘,
        ‘÷‘   : ‘÷‘
    };
    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: ‘‘
}))
时间: 2024-08-24 01:45:03

Ajax请求全局配置的相关文章

angular中ajax请求头配置 IE下不缓存请求

config(['$locationProvider', '$urlRouterProvider','$httpProvider', function($locationProvider, $urlRouterProvider, $httpProvider) { $locationProvider.hashPrefix('!'); $urlRouterProvider.otherwise('/customization/funsetting'); $httpProvider.defaults.h

框架基础:ajax设计方案(六)--- 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布

距离上一次博客大概好多好多时间了,感觉再不搞点东西出来,感觉就废了的感觉.这段时间回老家学习驾照,修养,然后7月底来上海求职(面了4家,拿了3家office),然后入职同程旅游,项目赶进度等等一系列的原因,导致没有太多时间去搞东西.感觉亏欠了好多,所以这次一次性补上.废话不多说了,我们直接进入主题. 介绍这次讲解的库的更新: ajax全局配置 请求参数的拓展(增加json)和重构优化 初始化参数类型检查 浏览器错误回收机制 增加ajax请求blob(二进制)类型 跨域问题的总结和支持 npm打包

小程序api请求层封装(Loading全局配置)

前言 小程序开发,没有vue中的axios那么好使,请求层的封装需要自己来搞. 当然请求层的配置少不了loading,这里索性也就将loading做一个配置,避免以后重复造轮子 请求封装 小程序中有封装好的请求方法:wx.request(url,method,header,success,fail,complete);方法类似于原生的ajax, 这里我们大的方面分两种,一种普通请求,一种是文件上传 普通请求又分为get请求,post请求,post请求又分为JSON格式和BODY格式因此 我们需要

全局为每一个ajax请求都附带一个loading效果 .ajaxSend

描述: 在Ajax请求发送之前绑定一个要执行的函数,这是一个 Ajax Event. 添加的版本: 1.0.ajaxSend( handler(event, jqXHR, ajaxOptions) ) handler(event, jqXHR, ajaxOptions) 类型: Function() 被调用的函数. 每当一个Ajax请求即将发送,jQuery就会触发ajaxSend事件,在这个时间点所有处理函数都会使用.ajaxSend()方法注册并执行. 观察这种方法,建立一个基本的Ajax加

全局的异常捕获过滤器 区分ajax请求 与浏览器导航请求

建一个类ExceptionAttribute 继承 HandleErrorAttribute 重写OnException 方法 里面代码: //1.0日志记录(文本日志和数据库日志) //拿到日志 Exception exe= filterContext.Exception; //获取当前exe的最详细信息 Exception inexe = exe.InnerException==null ? exe:exe.InnerException; while (inexe.InnerExceptio

spring mvc 第二天【注解实现springmvc Handler处理ajax简单请求 的配置】

这里使用的是在前台发起ajax请求Handler,后台伪造数据响应给前台, 配置对应ajax请求的Handler信息如下 1 @Controller 2 public class MyController { 3 //处理器方法 4 @RequestMapping(value="/first.do",produces="text/html;charset=utf-8") 5 public void doFirst(HttpServletResponse respon

配置chrome支持本地(file协议)ajax请求

配置chrome支持本地(file协议)ajax请求 网址:配置chrome支持本地(file协议)ajax请求 将html代码拖拽进入chrome通过file协议浏览时,发送的ajax请求本地文件,会报跨域错误.XMLHttpRequest cannot load file:///E:/webs/extJS/ext-3.3.0/examples/csdn/combobox.txt?_dc=1414738973999. Cross origin requests are only support

配置Chrome支持本地(file协议)的AJAX请求

https://www.cnblogs.com/micua/p/chrome-file-protocol-support-ajax.html 什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击HTML文件,直接在浏览器中运行演示 如果此时Demo中有AJAX操作,浏览器就会报一个错: XMLHttpRequest cannot load file:

AJAX请求和跨域请求详解(原生JS、Jquery)

一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 本博客实验环境: python:2.7.11 web框架:tonado jquery:2.1.1 二.“伪”AJAX 由于