浅析jQuery Ajax通用js封装
本文大概分为三步实现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封装的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
对Jquery中的ajax再封装,简化操作示例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQueryAja
-
封装了jQuery的Ajax请求全局配置
摘要: jQuery已经成为项目中最常见的js库,也是前端开发最喜欢使用的库.下面是在项目中封装了jQuery的Ajax,分享给大家. 代码: 复制代码 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) { var url = opt.url; var href = location.href; // 判断是否跨域请求 var requestType = 'jsonp'; if (url.indexOf
-
关于二次封装jquery ajax办法示例详解
前言 Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML AJax所涉及到得技术: 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLHttpRequest来和服务器进行异步通信.(核心) 4.使用javascript来绑定和调用. 在我们前端处理数据的时候免不了要 ajax 与后台通信, ajax 是通过 XMLHttpRequest 对象与服务器进行通信的, jquery 在 XMLHt
-
jQuery Ajax 全局调用封装实例代码详解
有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi
-
基于jQuery的ajax方法封装
ajax (ajax开发)简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在实际的项目里,ajax的应用频率很高
-
浅析jQuery Ajax通用js封装
本文大概分为三步实现jquery ajax通过js封装,通过代码实例讲解,代码附有注释,比较容易理解,具体详情如下所示: 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> 第二步:开发Ajax封装类,已测试通过,可以直接调用,直接贴代码,讲解就省了 /******************
-
jquery Ajax 全局调用封装实例详解
前言: 有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquer
-
浅析jQuery Ajax请求参数和返回数据的处理
刚接触学会用jQuery ajax的时候,觉得真东西好神奇,这样就可以把数据取回来了啊.然后我可以把取回来的数据渲染到页面上,一颗赛艇. 之前很早接触到项目,并不知道怎么优雅的去用jquery ajax(现在也不优雅): 那个时候看别人写的代码 有 $.post("","",...) 也有 $.get("","",...) 还有 $.ajax() 当然现在知道点,这些写法都是一个意思,还是习惯用 $.ajax() 写写吧. 之
-
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:true(默认情况),如: 复制代码 代码如下: function ManageCommentText(text) {var result = text;$.ajax({data: "get",url: "GetComments.aspx",data: "typ
-
从Ajax到JQuery Ajax学习
Ajax篇 XMLDocument和XMLHttpRequest对象 第一:创建XMLHttpRequest请求对象 复制代码 代码如下: function getXMLHttpRequest() { var xRequest=null; if(window.XMLHttpRequest) { xRequest=new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ xRequest=new Active
-
原生js jquery ajax请求以及jsonp的调用方法
ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待 异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 1.获取ajax对象 主流浏览器获取方式:火狐.谷歌.
-
原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f
-
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"
-
原生js封装的一些jquery方法(详解)
用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl