浅析jQuery Ajax通用js封装
本文大概分为三步实现jqueryajax通过js封装，通过代码实例讲解，代码附有注释，比较容易理解，具体详情如下所示：
第一步：引入jQuery库
<scripttype="text/javascript"src="<%=path%>/resources/js/jquery.min.js"></script>
第二步：开发Ajax封装类，已测试通过，可以直接调用，直接贴代码，讲解就省了
/*****************************************************************
jQueryAjax封装通用类(linjq)
*****************************************************************/
$(function(){
/**
*ajax封装
*url发送请求的地址
*data发送到服务器的数据，数组存储，如：{"date":newDate().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":newDate().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":newDate().getTime(),"state":1}
*successfn成功回调函数
*/
jQuery.axs=function(url,data,successfn){
data=(data==null||data==""||typeof(data)=="undefined")?{"date":newDate().getTime()}:data;
$.ajax({
type:"post",
data:data,
url:url,
dataType:"json",
success:function(d){
successfn(d);
}
});
};
/**
*ajax封装
*url发送请求的地址
*data发送到服务器的数据，数组存储，如：{"date":newDate().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":newDate().getTime()}:data;
$.ajax({
type:"post",
data:data,
url:url,
dataType:"json",
success:function(d){
successfn(d);
},
error:function(e){
errorfn(e);
}
});
};
});
第三步：调用模拟
<%@pagelanguage="java"pageEncoding="utf-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()
+path+"/";
%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<basehref="<%=basePath%>">
<title>jQueryAjax封装通用类测试</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<jsp:includepage="/view/common/js_taglib.jsp"></jsp:include>
<scripttype="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>
以上所述是小编给大家介绍的jQueryAjax通用js封装的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！