jQuery对AJAX操作的封装
1.jQuery对AJAX操作的封装——load()
(‘…′).load(url,[data],[fn])异步加载指定URL返回的数据(必需是text/html),挂载为当前选定元素的innerHTML示例:仿写GoogleSuggest,搜索建议服务器端:header(‘Content−Type:text/html′);客户端:
(‘#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()的一个简化版本。发起异步的GET请求,获取服务器端返回的JSON响应,并自动调用JSON.parse()方法把服务器返回的JSON字符串解析为JS对象。用法: .getJSON(‘xx.php’, data, fn)
6.jQuery对AJAX操作的封装—— .getScript() .getScript()是 .ajax()的一个简化版本。发起异步的GET请求,获取服务器端返回的JS响应,并自动调用eval()方法,执行服务器端范围的字符串数据。用法: .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
}); //此函数会自动把选定的表单进行序列化并异步提交