浅析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 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
java必学必会之static关键字
Dec 03 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
js中的闭包实例展示
Nov 01 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
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
一贴学会PHP 新手入门教程
2009/08/03 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
javascript 动态添加表格行
2006/06/22 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
javascript轮播图算法
2016/10/21 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
python爬虫获取多页天涯帖子
2018/02/23 Python
python实现图书管理系统
2018/03/12 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
Django框架封装外部函数示例
2019/05/28 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Python with标签使用方法解析
2020/01/17 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
什么是规则表达式
2012/05/03 面试题
策划总监岗位职责
2014/02/16 职场文书
公司承诺书怎么写
2014/05/24 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
婚宴新娘致辞
2015/07/28 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python