浅析jQuery Ajax通用js封装


Posted in Javascript onJune 22, 2016

本文大概分为三步实现jquery ajax通过js封装,通过代码实例讲解,代码附有注释,比较容易理解,具体详情如下所示:

第一步:引入jQuery库

<script type="text/javascript" src="<%=path%>/resources/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.axs=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.axse=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);
}
});
};
});

第三步:调用模拟

<%@ page language="java" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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("出错了");
}
);
$.axs(getRootPath()+"/test/ajax.html", null, function(data){
alert(data.data);
});
$.axse(getRootPath()+"/test/ajax.html",
null, 
function(){
alert("成功了");
},
function(){
alert("出错了");
});
});
</script>
</head>
<body>
</body>
</html>

以上所述是小编给大家介绍的jQuery Ajax通用js封装的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 #Javascript
最全的Javascript编码规范(推荐)
Jun 22 #Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 #Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 #Javascript
jQuery soColorPacker 网页拾色器
Jun 22 #Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 #Javascript
Javascript对象字面量的理解
Jun 22 #Javascript
You might like
图形数字验证代码
2006/10/09 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php检查页面是否被百度收录
2015/10/28 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
不要用强制方法杀掉python线程
2017/02/26 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python中的asyncio代码详解
2019/06/10 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Python批量启动多线程代码实例
2020/02/18 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
体育老师的教学自我评价分享
2013/11/19 职场文书
倡议书格式模板
2014/05/13 职场文书
小学亲子活动总结
2014/07/01 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
护士医德考评自我评价
2015/03/03 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
感恩的心主题班会
2015/08/12 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python