jquery_ajax_js,浅析jQuery Ajax通用js封装
本文大概分为三步实现jquery ajax通过js封装,通过代码实例讲解,代码附有注释,比较容易理解,具体详情如下所示:
第一步:引入jQuery库
第二步:开发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);
}
});
};
});
第三步:调用模拟
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
jQuery Ajax封装通用类测试
$(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("出错了");
});
});
以上所述是小编给大家介绍的jQuery Ajax通用js封装的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
jquery_ajax_js,浅析jQuery Ajax通用js封装相关推荐
- vb ajax提交post,使用jQuery AJAX将JS数组传递给VB.Net post
我使用jQuery AJAX post请求将客户端JS数组传递给服务器端VB.NET代码.我有一种方法可行,但我想知道最佳做法.我一开始是这样的:使用jQuery AJAX将JS数组传递给VB.Net ...
- jquery+ajax通用无刷新分页
前台自定义通用分页jquery插件 (一)框架:用jquery+ajax+struts1实现 自动创建行和列 持久层用的是abatis.数据库用的是MySQL. (二)sqlMap shangjia. ...
- jquery ajax与js XMLHttprequest
jQuery Ajax 事件 Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑.在jQuery这里有两种Ajax事件:局部事件 和 全局事件. 局部事件就是在每次的Ajax ...
- ajax纯js封装函数
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)AJAX 不是新的编程语言,而是一种使用现有标准的新方法.是7种技术的综合,它包 ...
- 基于jquery.ajax的进一步封装
这是最近写项目用到的一个小功能,给大家分享下,希望对大家有帮助. 直接上代码: %@ page language="java" contentType="text/htm ...
- js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
- ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
- ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签 发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
- common.js 通用方法封装
/*** 通用方法封装处理** Created by on 2018/9/7*/ (function ($) {var $table = $('#table');$.extend({/*** 表格封装 ...
- 【JS】jQuery+Ajax从放弃到知根知底,笔记
初识jQuery html 代码 <div></div> <div class="box1"></div> <div id=& ...
最新文章
- 水利水电计算机考试内容及合格标准,水利水电自考本科科目及流程.docx
- 分位数(quantiles)、Z-score 与 F-score
- 修复IE9-- safari 的sort方法
- SpringMVC+uploadify文件上传
- 国产特斯拉开启预定:官网被挤爆 3分钟内完成第一单预定
- JAVA_pagecontext页面跳转
- #ifdef 的使用
- mybatis注解开发-动态SQL
- Android 超级工具类
- 一种小封装485芯片
- kitti点云地图拼接
- 技术入股创业一年,家庭收入变成负5万
- 京东大数据方向-Java方向-实习面经一面二面(offer没去。。。)
- lightning接口_带你回看手机接口发展史:TypeC将实现大一统?
- 余承东:华为技术走在产业前列,别人想超越很难;理想销量夺冠后,员工不满年终奖打折;黑客窃取GitHub代码签名证书|极客头条
- 使用JTAG Flash Programmer烧写Flash
- 【解决方案】云看大熊猫,动物园直播解决方案EasyNVR+EasyNVS如何玩转动物IP
- 【问题记录】04 MyBatis报错:Parameter ‘XXX‘ not found. Available parameters are [page, hashMap, param1, param
- BHM-AN10 OTG 刷机 记录 2021-10-18
- Java编写一个原始的聊天室(线程、服务器-客户端)