关闭

jQuery对AJAX操作的封装

标签: jqueryajax服务器异步
1449人阅读 评论(0) 收藏 举报
分类:

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
});  //此函数会自动把选定的表单进行序列化并异步提交
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:10332次
    • 积分:205
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:1篇
    • 译文:0篇
    • 评论:4条
    文章分类
    最新评论