jQuery对AJAX操作的封装

原创 2015年11月20日 00:00:33

jQuery对AJAX操作的封装

1.jQuery对AJAX操作的封装——load()
().load(url,[data],[fn])URL(text/html)innerHTML仿GoogleSuggestheader(ContentType:text/html);<script type="math/tex" id="MathJax-Element-154">(‘…’).load(url, [data], [fn]) 异步加载指定URL返回的数据(必需是text/html),挂载为当前选定元素的innerHTML 示例:仿写GoogleSuggest,搜索建议 服务器端: header(‘Content-Type: text/html’); 客户端: </script>(‘#suggest ul’).load(‘1.php?kw=xx’, fn);
load()函数的局限性:(1)服务器只能返回HTML片段 (2)此方法只能把返回结果加载为当前选定元素的innerHTML,已有内容全部会被清除 (3)响应成功时,才有效;失败的情况下,没有任何处理机制

2.jQuery对AJAX操作的封装——$.ajax()
使用方法:

$.ajax( {
type: 'GET/POST/PUT/DELETE',
url: 'xx.php',
data: 'k1=v1&k2=v2' | {k1:v1,  k2:v2},
dataType: 'text/html/script/xml/json/jsonp',
beforeSend: fn,
success: fn,
error: fn,
complete: fn
} )

在jQuery提供的所有AJAX函数中,提交的数据可以有两种形式:
(1)HTTP协议规定的标准格式: ‘k1=v1&k2=v2…’
(2)JS对象格式:{ k1: v1, k2:v2 } jQuery在发送此格式的数据之前会自动调用$.param()函数,将JS对象改为第一种格式
示例:分多次异步加载员工数据
服务器端:
header(‘Content-Type: application/json’);
客户端:

$.ajax({
type: 'GET',
url: '2.php',
dataType: 'json',
success: function(data){
}
});

3.jQuery对AJAX操作的封装——$.get()

.get().ajax()的一个简化版本。
用法:.get(url,[data],[sccessFn]).get(‘2.php’, function(data){
})

4.jQuery对AJAX操作的封装——$.post()

.post().ajax()的一个简化版本。
示例:实现表单数据的异步提交

$.post(
'4.php' , 
'k1=v1&k2=v2'/{k1:v1,k2:v2},## 标题 ##  
function(data){
}
)

提示:(1)若请求数据是对象格式,jQuery底层会自动将其转换为符合HTTP标准的数据格式(键值对形式) (2)$.post底层会自动修改Content-Type请求消息的头部为application/x-www-form-urlencoded

5.jQuery对AJAX操作的封装——.getJSON().getJSON()是.ajax()GETJSONJSON.parse()JSONJS.getJSON(‘xx.php’, data, fn)

6.jQuery对AJAX操作的封装——.getScript().getScript()是.ajax()GETJSeval().getJSON(‘xx.php/xx.js’)

7.补充话题:使用AJAX异步提交表单
(1)方式一:手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用.post(url,data,fn)(2)('#myform').serialize( ); 其返回值就是“k1=v1&k2=v2...”键值对形式,再使用$.post发起异步请求即可。
(3)方式三:使用jQuery Form插件提供的ajaxSubmit()函数,用法:

$('#myform').ajaxSubmit({
type: 'GET/POST',
url: 'xx.php',
dataType: 'json',
success: fn,
clearForm: true,
resetForm: true
});  //此函数会自动把选定的表单进行序列化并异步提交

相关文章推荐

jQuery-jquery封装的ajax使用总结

对于页面一些效果,验证等,我们都是通过JavaScript语言进行完成的,但是它也就像我们的Java代码一样,是最前台语言最基础的,而jQuery则是对js代码进行封装方便我们前台代码的编写,而且它还...

对JQuery的ajax进行二次封装

第一步:引入jQuery库 /resources/js/jquery.min.js"> 第二步:开发Ajax封装类,已测试通过,可以直接调用,直接贴代码,讲解就省了 /***...

jquery Ajax 全局调用封装

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....})写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端...

封装两个简单的jquery组件

Jquery给我们提供了很大的方便,我们把他堪称是一个公共库,以致在这个公共库上延伸出了很多jquery插件。 主要说两个项目用途: (1)遮罩层,跟一般的遮罩层不一样,我需要实现的是对某一个元素...

对Jquery中的ajax再封装,简化操作

jQueryAjaxJson取值示例 $(function () { jsonAjax("AjaxQuery.aspx", "ty...

jquery扩展原生ajax,减少逻辑,jquery插件

为什么这么做前提加入基于这样的一个现实,我们后台返回给我们的数据中都有一个json数据,数据中包含data,success,message等字段,success表示是否后台有操作的异常。通用处理,减少...

struts2与jquery实现ajax操作

  • 2008年09月30日 12:04
  • 4.32MB
  • 下载

jQuery调用AJAX异步操作超清晰教程

  • 2016年01月03日 11:52
  • 1010KB
  • 下载

使用JQuery Deferred对象的then() 解决多个AJAX操作顺序依赖的问题

我们知道deferred.resolve()、deferred.reject()、deferred.notify()可以指定参数值,这个参数会传递给相应状态下的回调函数。如果我们使用的是done()、...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery对AJAX操作的封装
举报原因:
原因补充:

(最多只允许输入30个字)