jq ajax封装
//ajax公共方法,zs 2017-06-14
$.extend({
//比jq的ajax多了的参数:
//salert是否在请求成功后弹出后台的SuressStr字段值
//ealertStr:请求出错
majax: function (a) {
if (typeof a === "object") {
var defaultOption = {
url: "",
async: true,
cache: true,//dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
data: null,
type: "get",
timeout: null,
dataType: "",//预期服务器返回的数据类型
contentType: "application/x-www-form-urlencoded",//发送信息至服务器时内容编码类型。
beforeSend: function (XMLHttpRequest) {
// console.log("请求开始");
},
//dataFilter: function (data, type) {
// console.log("请求成功success之前");
//dataFilter给Ajax返回的原始数据的进行预处理的函数。它的调用在success之前
//测试1.10.2和2.0.3版本的js如果存在此方法则success不会执行。会直接到error方法里,虽然状态码是200
//},
success: function (data, textStatus, jqXHR) {
// console.log("请求成功");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// console.log("请求出错");
},
complete: function (XMLHttpRequest) {
//在error或success之前执行
// console.log("无论成功错误我都存在");
},
context: null,//这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象
global: true,//是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified: false,//仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
jsonp: "",
jsonpCallback: "",
username: null,
password: null,
processData: true,
scriptCharset: "",
traditional: false,// 默认的话,traditional为false,即jquery会深度序列化参数对象,不深度序列化的例子:data:{ p: ["123", "456", "789"] },p会序列化成 p=123&p=456&p=456。深度序列化例子:data:{foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
//xhr: function () {
//测试会导致返回的status为0
//},
//自加参数
eAlertStr: "",//请求出错弹出的内容
eAlertStrOrder: false,//eAlertStr弹出的顺序,false表示在error方法执行完毕之后弹出
sAlert: false,//请求成功后是否弹出后台返回的SuccessStr字段的内容,必须确定后台返回的是能序列化的json
sAlertOrder: false,//sAlert弹出的顺序,false表示在success方法执行完毕之后弹出
execomplete: function (data, textStatus, jqXHR) {
//success或error方法执行完毕,success时该方法的参数才有值
// console.log("方法执行完毕了");
}
}
for (i in a) {
defaultOption[i] = a[i];
}
$.ajax({
url: defaultOption.url,
async: defaultOption.async,
cache: defaultOption.cache,
data: defaultOption.data,
type: defaultOption.type,
timeout: defaultOption.timeout,
dataType: defaultOption.dataType,
contentType: defaultOption.contentType,
beforeSend: function (XMLHttpRequest) {
defaultOption.beforeSend(XMLHttpRequest);
},
//dataFilter: function (data, type) {
// defaultOption.dataFilter(data, type);
//},
success: function (data, textStatus, jqXHR) {
var i = true;
var datas = data;
if (defaultOption.sAlert && typeof data != "object") {
datas = JSON.parse(data);
}
if (defaultOption.sAlert && defaultOption.sAlertOrder && datas.SuccessStr != null && datas.SuccessStr != "undefined" && $.trim(datas.SuccessStr) != "") {
$.gritter.add({
title: "提示",
text: datas.SuccessStr,
class_name: 'gritter-success '
});
i = false;
}
if (!i) {
setTimeout(function () {
defaultOption.success(data, textStatus, jqXHR);
defaultOption.execomplete(data, textStatus, jqXHR);
}, 400);
} else {
defaultOption.success(data, textStatus, jqXHR);
if (i && defaultOption.sAlert && datas.SuccessStr != null && datas.SuccessStr != "undefined" && $.trim(datas.SuccessStr) != "") {
$.gritter.add({
title: "提示",
text: datas.SuccessStr,
class_name: 'gritter-success '
});
}
setTimeout(function () {
defaultOption.execomplete(data, textStatus, jqXHR);
}, 400);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var i = true;
if (defaultOption.eAlertStrOrder && defaultOption.eAlertStr != null && defaultOption.eAlertStr != "undefined" && $.trim(defaultOption.eAlertStr) != "") {
$.gritter.add({
title: "提示",
text: defaultOption.eAlertStr,
class_name: 'gritter-error '
});
i = false;
}
if (!i) {
setTimeout(function () {
defaultOption.error(XMLHttpRequest, textStatus, errorThrown);
defaultOption.execomplete(data, textStatus, jqXHR);
}, 400);
} else {
defaultOption.error(XMLHttpRequest, textStatus, errorThrown);
if (i && defaultOption.eAlertStr != null && defaultOption.eAlertStr != "undefined" && $.trim(defaultOption.eAlertStr) != "") {
$.gritter.add({
title: "提示",
text: defaultOption.eAlertStr,
class_name: 'gritter-error '
});
setTimeout(function () {
defaultOption.execomplete(data, textStatus, jqXHR);
}, 400);
}
}
},
complete: function (XMLHttpRequest) {
defaultOption.complete(XMLHttpRequest);
},
context: defaultOption.context,
global: defaultOption.global,
ifModified: defaultOption.ifModified,
jsonp: defaultOption.jsonp,
jsonpCallback: defaultOption.jsonpCallback,
username: defaultOption.username,
password: defaultOption.password,
processData: defaultOption.processData,
scriptCharset: defaultOption.scriptCharset,
traditional: defaultOption.traditional,
//xhr: function () {
// defaultOption.xhr();
//}
});
} else {
console.log("参数格式不正确");
}
},
mpost: function (url, data, callback, type) {
if (jQuery.isFunction(data)) {
type = type || callback;
callback = data;
data = undefined;
}
return $.majax({
url: url,
type: "post",
dataType: type,
data: data,
success: callback
});
},
mget: function (url, data, callback, type) {
if (jQuery.isFunction(data)) {
type = type || callback;
callback = data;
data = undefined;
}
return $.majax({
url: url,
type: "get",
dataType: type,
data: data,
success: callback
});
},
});
成功的提示的插件为 $.gritter自行引用,也可以自己改成你们项目里的,注意下我这提示用的返回字段也要更改成你们项目的
转载注明:http://www.cnblogs.com/zszs/p/7016606.html
jq ajax封装的更多相关文章
- 关于jq ajax封装以及error的报错参数
jq的ajax完整版本 $.ajax({ url: "GetCityByPId.ashx", data: {pId:pid}, dataType: "JSON" ...
- 关于jq ajax封装以及ajax上传Webapi
jq的ajax完整版本 $(function () { fileChange(); }); function fileChange() { $('#fileinput').change ...
- 原生Ajax 和Jq Ajax
前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...
- Javascript:来一个AJAX封装函数
前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 ...
- 妹味6:ajax与ajax封装
(功能)ajax能且仅能 从服务器读取文件 (环境)需要服务器环境才能测试,可以用工具建立本地服务器环境 (缓存)解决缓存问题:url加时间戳让每次请求地址唯一,如 url='abc.txt?t='+ ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- Ajax封装函数笔记
Ajax封装函数: function ajax(method, url, data, success) { //打开浏览器 //1.创建一个ajax对象 var xhr = null; try { x ...
- 原生ajax封装,包含post、method方式
原生ajax封装,包含post.method方式 function ajax(method, url, data, success) { var xhr = null; try { xhr = new ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
随机推荐
- Mybatis和Mybatis-Plus时间范围查询,亲测有效
一.mysql 1.传入时间范围参数类型是字符串 <if test="startTime!=null and startTime.trim() neq ''"> and ...
- 关于swagger
转自https://blog.csdn.net/sanyaoxu_2/article/details/80555328 1:认识Swagger Swagger 是一个规范和完整的框架,用于生成.描述. ...
- Excel—使用if(countif())表达式来筛选两个表格中相同的数据
关注微信公众号:CodingTechWork,一起学习进步. 引言 在线上运维的过程中,遇到一个头疼的事情,有一些合作公司的数据直接从平台上down下来是一个excel,然后发到研发手里去数据库中 ...
- Shell学习(三)Shell参数传递
一.传参实例 ##脚本文件内容 #执行的文件名 echo $0; #第一个参数 echo $1; #第二个参数 echo $2; #第三个参数 echo $3; ##调用语句 ./testShell. ...
- 【小白学PyTorch】13 EfficientNet详解及PyTorch实现
参考目录: 目录 1 EfficientNet 1.1 概述 1.2 把扩展问题用数学来描述 1.3 实验内容 1.4 compound scaling method 1.5 EfficientNet ...
- golang开发:select多路选择
select 是 Golang 中的一个控制结构,语法上类似于switch 语句,只不过select是用于 goroutine 间通信的 ,每个 case 必须是一个通信操作,要么是发送要么是接收,s ...
- Linux系统编程 —读写锁rwlock
读写锁是另一种实现线程间同步的方式.与互斥量类似,但读写锁将操作分为读.写两种方式,可以多个线程同时占用读模式的读写锁,这样使得读写锁具有更高的并行性. 读写锁的特性为:写独占,读共享:写锁优先级高. ...
- Regression trees树回归 以及其他
https://www.cnblogs.com/wuliytTaotao/p/10724118.html 选 weighted variance 最小的 但是weighted variance是怎么计 ...
- [JZOJ]2109 清兵线 题解
## [JZOJ]2109 清兵线 题解 **FIRST 题目大意** 给你一些正整数,这些正整数为数轴上若干个点代表的数.现求:假设从原点出发,走m以内(包括m)的距离最多能够访问多少个点,输出m- ...
- 「DevOps 转型与实践」沙龙回顾第二讲
背景介绍 本期分享内容为<平台化 DevOps-云计算与云原生模式下 DevOps 的建设实践>.目前,DevOps 越来越成为大家当前建设的热点,伴随着基础设施的转型和应用框架的转型,更 ...