当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery Ajax 全局调用封装实例代码详解

jQuery Ajax 全局调用封装代码

  • 发布时间:
  • 作者:码农之家
  • 点击:112

这篇文章主要知识点是关于jquery、ajax全局、ajax封装、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF作者:(印) 乔希 (Joshi,V.) 著,
立即下载

jQuery Ajax 全局调用封装实例代码详解

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....})

写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的!

【嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人】

jQuery Ajax通用js封装

第一步:引入jQuery库

<script type="text/javascript" src="/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.axpost=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.axspost=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);
}
});
};
});

第三步:调用模拟

<!DOCTYPE html>
<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("出错了");
}
);
$.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 字段就行了,避免了重复工作和代码冗余。

以上内容是小编给大家介绍的jQuery Ajax 全局调用封装实例代码详解的相关内容,希望对大家有所帮助!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 实例解析jquery ajax jsonp跨域调用
  • 客户端代码 %@ Page Language=C# AutoEventWireup=true CodeBehind=WebForm1.aspx.cs Inherits=WebApp.WebForm1 % !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 runat=server script src=jquery-1.7.1.min.js type=text/javascript/script script type=text/javascript function aa() { $.ajax({ url: http://localhost:12079/WebForm2.aspx, data: p1=1p2=2callback=?, type: post, processData: false, t……

  • JQuery和Js中让ajax执行完后再继续往下执行的实现方法
  • $.ajax ({ cache: false, async: false, // 太关键了,学习了,同步和异步的参数 dataType: json, type: post, url: ../handle/Ladder_Fee_Code.ashx?ajaxaction=Select_FangAn, success: function (data) { alert(1); } }); alert(2); ……

  • jQuery Ajax数据加载知识点总结
  • 加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为: div/divbuttonload/button 同目录下的 test.html 文件内容为: spantest/span 我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上: $(button).click(function() { $(div).load(test.html); }); 点击按钮后: 加载 JSON JSON 即 Javascript Object Notation,直译过来即 Javascript 对象表示法,因此它能很方便地表示……

  • 为jquery的ajax请求添加超时timeout时间的操作方法实例详解
  • 下面给大家介绍为jquery的ajax请求添加超时timeout时间的实例 有时侯要用ajax来轮询某个服务是否可用,但是各个浏览器ajax的超时时间有可能不一样,所以希望ajax能只尝试几秒钟,然后隔几秒再次发送一次ajax检查一次。可以用timeout属性。 var checkLoading = function(timer) { //先延时再获取状态,否则立即获取可能重启前的服务还没有关闭 setTimeout(function() { $.ajax({ url: /onceos/version, dataType:……

  • jQuery使用ajaxSubmit()提交表单方法步骤
  • ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示: script src=http://code.jquery.com/jquery-1.11.0.min.js/script script src=http://malsup.github.io/jquery.form.js/script 那么,如何通过ajaxSubmit(obj)提交数据呢?首先我们需要一个form: XHTML form 标题:input type=text name=title /br / 内容:textarea name=contenttextarea/br / button提交/button /form 上面是一个需要提交内……

    jquery 相关电子书
    学习笔记

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    版权投诉 / 书籍推广 / 赞助:QQ:520161757