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带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
随机推荐
- Java成神之路:第三帖----数据结构与算法之队列
数据结构与算法--队列 今天掉了两根头发,摸掉的,记得 别乱摸,很珍贵的!! 什么是队列? 1)队列是一个有序列表,可以用数组或是链表来实现 2)遵循 先入先出 的原则.即:先存入队列的数据,要先取出 ...
- .net 中的 StringBuilder 和 TextWriter 区别
最近闲来之余,看了一些开源的类库,看到有些类库喜欢用TextWriter类来记录相关的字符串数据,感到比较好奇,为啥不用StringBuilder类对象.于是在网上搜索了一番,总结了相关笔记. Str ...
- JDK的安装与环境变量的配置
一.JDK的安装 1. JDK的下载地址 https://www.oracle.com/java/technologies/javase-downloads.html. 2. 当前最流行的是 ...
- xml的复习
xml的复习 1.概念:可扩展标记语言 2.功能: *存储数据 1.配置文件 2.在网络中传播 3.xml与html区别: xml语法严格,HTML语法松散 xml存储数据,HTML展示 ...
- java8的::
public static void main(String[] args) throws Exception { // 第一种方法引用的类型是构造器引用,语法是Class::new,或者更一般的形式 ...
- 信号、多app应用、flask-script
信号 Flask 框架中的信号基于blinker,其只要就是让开发者可以在flak请求过程中制定一些用户行为 安装:pip3 install blinker 内置信号 request_started ...
- Nginx 配置 HTTPS 完整过程(阿里云申请免费版一年ssl证书)
1. nginx 的 ssl 模块安装 查看 nginx 是否安装 http_ssl_module 模块. $ /usr/local/nginx/sbin/nginx -V 如果出现 configur ...
- IDEA环境配置里的一些error
1. idea添加edit configuration 没有tomcat图标 File->Setting->Build,Execution,Deployment-->Applicat ...
- python中的三大流程
三大流程又叫程序控制流程 在我们编写代码时,程序是怎么运行的,要用到程序控制流程.在普通代码中,运行的方向是从上到下,从左到右 这就是顺序(逐行扫描). 第二个是分支(又叫选择)结构,例如在编写代码时 ...
- React手稿之State Hooks of Hooks
React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段. 官方也陈述,接下来的90%的工作会投入到React Hooks中. 从目前 ...