jQuery Ajax 全局调用封装实例代码详解
有一种情况：全站都要用异步方式来调用数据，提交数据，那么你每次操作都会要$.ajax({.....})
写重复的方法和代码，冗余太大，也浪费时间，虽说你有代码自动提示补全，但真的不优雅，身为前端极客，是不能允许的！
【嘿嘿！虽说我现在基本不用jquery了，不过异步概念是永远要用的，就帮助下新人】
jQueryAjax通用js封装
第一步：引入jQuery库
<scripttype="text/javascript"src="/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.axpost=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.axspost=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);
}
});
};
});
第三步：调用模拟
<!DOCTYPEhtml>
<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("出错了");
}
);
$.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字段就行了，避免了重复工作和代码冗余。
以上内容是小编给大家介绍的jQueryAjax全局调用封装实例代码详解的相关内容，希望对大家有所帮助！