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 相关文章推荐
jQuery中after的两种用法实例
Jul 03 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
JavaScript动态绑定详解
Sep 14 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
JS简易计算器实例讲解
Jun 30 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
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php内嵌函数用法实例
2015/03/20 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
vue多次循环操作示例
2019/02/08 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python样条插值的实现代码
2018/12/17 Python
python实现石头剪刀布程序
2021/01/20 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
django 实现简单的插入视频
2020/04/07 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
软件项目开发计划书
2014/05/01 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
高中班主任心得体会
2016/01/07 职场文书
学生会自荐信
2019/05/16 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
MongoDB使用场景总结
2022/02/24 MongoDB