jQuery Ajax 全局调用封装实例代码详解


Posted in Javascript onJune 02, 2016

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....})

写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的!

【嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人】

jQuery Ajax通用js封装

第一步:引入jQuery库

<script type="text/javascript" src="/js/jquery.min.js"></script>

第二步:开发Ajax封装类,已测试通过,可以直接调用,直接贴代码,讲解就省了

/*****************************************************************
jQuery Ajax封装通用类 (linjq) 
*****************************************************************/
$(function(){
/**
* ajax封装
* url 发送请求的地址
* data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
* async 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
* 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
* type 请求方式("POST" 或 "GET"), 默认为 "GET"
* dataType 预期服务器返回的数据类型,常用的如:xml、html、json、text
* successfn 成功回调函数
* errorfn 失败回调函数
*/
jQuery.ax=function(url, data, async, type, dataType, successfn, errorfn) {
async = (async==null || async=="" || typeof(async)=="undefined")? "true" : async;
type = (type==null || type=="" || typeof(type)=="undefined")? "post" : type;
dataType = (dataType==null || dataType=="" || typeof(dataType)=="undefined")? "json" : dataType;
data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
$.ajax({
type: type,
async: async,
data: data,
url: url,
dataType: dataType,
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
};
/**
* ajax封装
* url 发送请求的地址
* data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
* successfn 成功回调函数
*/
jQuery.axpost=function(url, data, successfn) {
data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
$.ajax({
type: "post",
data: data,
url: url,
dataType: "json",
success: function(d){
successfn(d);
}
});
};
/**
* ajax封装
* url 发送请求的地址
* data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
* dataType 预期服务器返回的数据类型,常用的如:xml、html、json、text
* successfn 成功回调函数
* errorfn 失败回调函数
*/
jQuery.axspost=function(url, data, successfn, errorfn) {
data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
$.ajax({
type: "post",
data: data,
url: url,
dataType: "json",
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
};
});

第三步:调用模拟

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery Ajax封装通用类测试</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<jsp:include page="/view/common/js_taglib.jsp"></jsp:include>
<script type="text/javascript">
$(function(){
$.ax(
getRootPath()+"/test/ajax.html",
null,
null,
null,
null, 
function(data){
alert(data.code);
}, 
function(){
alert("出错了");
}
);
$.axpost(getRootPath()+"/test/ajax.html", null, function(data){
alert(data.data);
});
$.axspost(getRootPath()+"/test/ajax.html",
null, 
function(){
alert("成功了");
},
function(){
alert("出错了");
});
});
</script>
</head>
<body>
</body>
</html>

$.axpost(getRootPath()+"/test/ajax.html", null, function(data){
alert(data.data);
});

如上代码:只要填写 url,和要传输的 data 字段就行了,避免了重复工作和代码冗余。

以上内容是小编给大家介绍的jQuery Ajax 全局调用封装实例代码详解的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
vue实现五子棋游戏
May 28 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 #Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 #Javascript
Jquery获取第一个子元素简单实例
Jun 02 #Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 #Javascript
javascript三种代码注释方法
Jun 02 #Javascript
JavaScript对Json的增删改属性详解
Jun 02 #Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 #Javascript
You might like
9段PHP实用功能的代码推荐
2014/10/14 PHP
如何打开php的gd2库
2017/02/09 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
jquery处理json对象
2014/11/03 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
js实现每日签到功能
2018/11/29 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
pyramid配置session的方法教程
2013/11/27 Python
打包发布Python模块的方法详解
2016/09/18 Python
python制作websocket服务器实例分享
2016/11/20 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
如何开发安全的AJAX应用
2014/03/26 面试题
仓库文员岗位职责
2014/04/06 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
Linux安装Docker详细教程
2022/07/07 Servers