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 = {
' ' : ' ',
' ' : ' ',
'<' : '<',
'<' : '<',
'>' : '>',
'&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: ''
}))
Ajax请求全局配置的更多相关文章
- ajax请求中的6个全局事件
//事件触发顺序ajaxStart,ajaxSend,ajaxSuccess或ajaxError,ajaxComplete,ajaxStop $(document).ajaxStart(functio ...
- 使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
- 框架基础:ajax设计方案(六)--- 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布
距离上一次博客大概好多好多时间了,感觉再不搞点东西出来,感觉就废了的感觉.这段时间回老家学习驾照,修养,然后7月底来上海求职(面了4家,拿了3家office),然后入职同程旅游,项目赶进度等等一系列的 ...
- 使用ajax请求接口,跨域后cookie无法设置,全局配置ajax;及使用axios跨域后cookie无法设置,全局配置axios
问题一: 使用ajax/axios跨域请求接口,后端放行了,能够正常获取数据,但是cookie设置不进去,后端登录session判断失效 ajax解决办法: //设置ajax属性 crossDomai ...
- 前端通信:ajax设计方案(六)--- 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布
距离上一次博客大概好多好多时间了,感觉再不搞点东西出来,感觉就废了的感觉.这段时间回老家学习驾照,修养,然后7月底来上海求职(面了4家,拿了3家office),然后入职同程旅游,项目赶进度等等一系列的 ...
- 小程序api请求层封装(Loading全局配置)
前言 小程序开发,没有vue中的axios那么好使,请求层的封装需要自己来搞. 当然请求层的配置少不了loading,这里索性也就将loading做一个配置,避免以后重复造轮子 请求封装 小程序中有封 ...
- ajax请求加全局loading , 个别特殊请求不显示loading
项目中,请求开始前加载loading遮罩层,请求结束关闭遮罩,一般都会加在全局中,但有个别请求不需要加全局loading 的话,这时候就需要对这些请求进行配置 全局加loading: ; functi ...
- Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- C# MVC 全局错误Application_Error中处理(包括Ajax请求)
在MVC的Global.asax Application_Error 中处理全局错误. 如果在未到创建请求对象时报错,此时 Context.Handler == null . 判断为Ajax请求时,我 ...
随机推荐
- 【进阶修炼】——改善C#程序质量(5)
71, 区分异步和多线程的应用场景. 计算机的很多硬件,如硬盘,光驱,声卡,网卡都有DMA(Direct Memory Access)功能,它可以不占用cpu的资源,而异步的提出恰恰就是基于这个的.而 ...
- OpenSceneGraph-3.2.0 源代码的编辑步骤
到osg官网去下载源代码 官网 再把资源包下载下来叫作3dpart资源包. 源代码下载下来之后依照这个步骤来. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- android开发(28) 做个 指南针 应用
参考网上的资料,做了个指南针应用玩玩. 步骤: 1.获得 SensorManager. mSensorManager = (SensorManager) getSystemService(SENSOR ...
- 【linux】——Ubuntu 12.04中文输入法的安装
Ubuntu 12.04中文输入法的安装 Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ibus是输入法框架. 在Ubuntu ...
- js学习(一)-对象和函数概念
//-----------------------js代码-------------------- function class1(){ //类成员的定义及构造函数 this.name = ...
- java 模拟一个单向链表
class Node { //当前节点 private String data; //下个节点 private Node next; //当前节点 public void setData(String ...
- MD5骨骼动画模型加载(一)
前面我们分析了静态模型OBJ格式,桢动画模型MD2,这篇主要分析骨骼动画MD5的一些概念并且实现. 混合桢动画有计算简单,容易实现等优点,但是在需要比较细致的效果时,则需要更多的关键桢,每桢都添加相同 ...
- 字节码分析finally块对return返回值的影响
直接进入主题.看如下代码: public int test(){ int i=0; try { i=1; return i; } catch (Exception e) { i=2; return i ...
- [转]浅谈Android五大布局(二)——RelativeLayout和TableLayout
在浅谈Android五大布局(一)中已经描述了LinearLayout(线性布局).FrameLayout(单帧布局)和AbsoulteLayout(绝对布局)三种布局结构,剩下的两种布局Relati ...
- 【转载】Linux命令行常用光标移动快捷键
声明:下面内容来自:http://www.linuxidc.com/Linux/2016-10/136027.htm, 来源:linux社区 作者:aslongas 我转载于此处,为了作个笔记,方便 ...