《锋利的jQuery》笔记---jQuery中的Ajax
2017-03-22 09:53
288 查看
jQuery中的ajax:
1.load()方法:能载入远程HTML代码并插入到DOM中。它是jQuery中最为简单和常用的ajax方法。通常用来从服务器上获取静态的数据文件。
(1)只需要将要加载的文件的URL作为参数传递给load()方法即可。
eg:$("#wrap").load("test.html");
如果只加载某页面的某些元素,使用load()方法的URL参数达到目的。load()方法的URL参数的语法结构为:"url selector"
eg:只需要加载test.html页面中class为res的文件
$("#wrap").load("test.html .res");
(2)参数解释
有三个:url、data(可选)、callback(可选)
data:若没有参数传递,则是get方式;反之,post方式
callback(回调函数):
有三个参数:请求返回的内容responseText、
请求状态textStatus( 4种:success、error、notmodified、timeout)
XMLHttpRequest对象
注意:无论Ajax请求是否成功,只要将请求完成(complete)后,回调函数callback就被触发
2.$.get()方法和[b]$.post()方法:[/b]
参数解释
有四个:url、data(可选)、callback(可选)、type(可选)
callback(回调函数):
有两个参数:返回的内容 data,可以是JSON文件、HTML片段等
请求状态 textStatus(4种)
注意:回调函数callback只有当数据成功返回(success)后才被调用
3.$.getScript()方法和$.getJson()方法
参数解释:两个
$.getScript():直接加载.js文件
回调函数会在JS文件成功载入后运行。
$.getJson():加载.json文件
回调函数里处理返回的数据data,用来遍历相应的数据
扩展:jQuery中提供了一个通用的遍历方法$.each(),可以用于遍历对象和数组,是全局函数,它有两个参数(一个数组或对象,回调函数)。在$.each()函数中,如果需要退出循环,只要返回false即可
4.$.ajax()方法:它是jQuery最底层的Ajax实现,可以代替前面所有方法
只有一个参数,但却包含了所有信息。参数以键值形式存在,每一个参数都是可选的。
常用的参数有:
url、type(post或get)、timeout、data、dataType、complete(请求完成后调用的回调函数,请求成功或失败均可调用)、success、error,global(表示是否触发全局Ajax事件,默认为true)
5.序列化元素:data中数据比较多时,可以使用序列化元素下面的方法简化数据
serialize():能够将DOM元素内容序列化为字符串
serializeArray():能够将DOM元素内容序列化后,返回JSON格式的数据
两个方法的使用eg:获取form表单的数据,可以使用$("form").serialize()
$.param():它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化
eg:var obj = {a:1,b:2,c:3};
var k = $.param( obj );
alert(k);//输出a=1&b=2&c=3
看起来内容很多,其实也很好记,我说一下我的方法:
jQuery中的ajax方法分四类,按照功能大小可以这样记:
load()方法-->$.get()方法和post()方法-->$.ajax()方法
$.getScript()方法和$.getJson()方法主要是根据加载的不同文件
除了$.ajax()方法,注意三类方法的参数设置及其中callback的使用
对于序列化元素,主要是简化data中数据
这样整个jQuery中的ajax就很快掌握了,但还需在实战项目中进行运用哦!
1.load()方法:能载入远程HTML代码并插入到DOM中。它是jQuery中最为简单和常用的ajax方法。通常用来从服务器上获取静态的数据文件。
(1)只需要将要加载的文件的URL作为参数传递给load()方法即可。
eg:$("#wrap").load("test.html");
如果只加载某页面的某些元素,使用load()方法的URL参数达到目的。load()方法的URL参数的语法结构为:"url selector"
eg:只需要加载test.html页面中class为res的文件
$("#wrap").load("test.html .res");
(2)参数解释
有三个:url、data(可选)、callback(可选)
data:若没有参数传递,则是get方式;反之,post方式
callback(回调函数):
有三个参数:请求返回的内容responseText、
请求状态textStatus( 4种:success、error、notmodified、timeout)
XMLHttpRequest对象
注意:无论Ajax请求是否成功,只要将请求完成(complete)后,回调函数callback就被触发
2.$.get()方法和[b]$.post()方法:[/b]
参数解释
有四个:url、data(可选)、callback(可选)、type(可选)
callback(回调函数):
有两个参数:返回的内容 data,可以是JSON文件、HTML片段等
请求状态 textStatus(4种)
注意:回调函数callback只有当数据成功返回(success)后才被调用
3.$.getScript()方法和$.getJson()方法
参数解释:两个
$.getScript():直接加载.js文件
回调函数会在JS文件成功载入后运行。
$.getJson():加载.json文件
回调函数里处理返回的数据data,用来遍历相应的数据
扩展:jQuery中提供了一个通用的遍历方法$.each(),可以用于遍历对象和数组,是全局函数,它有两个参数(一个数组或对象,回调函数)。在$.each()函数中,如果需要退出循环,只要返回false即可
4.$.ajax()方法:它是jQuery最底层的Ajax实现,可以代替前面所有方法
只有一个参数,但却包含了所有信息。参数以键值形式存在,每一个参数都是可选的。
常用的参数有:
url、type(post或get)、timeout、data、dataType、complete(请求完成后调用的回调函数,请求成功或失败均可调用)、success、error,global(表示是否触发全局Ajax事件,默认为true)
5.序列化元素:data中数据比较多时,可以使用序列化元素下面的方法简化数据
serialize():能够将DOM元素内容序列化为字符串
serializeArray():能够将DOM元素内容序列化后,返回JSON格式的数据
两个方法的使用eg:获取form表单的数据,可以使用$("form").serialize()
$.param():它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化
eg:var obj = {a:1,b:2,c:3};
var k = $.param( obj );
alert(k);//输出a=1&b=2&c=3
看起来内容很多,其实也很好记,我说一下我的方法:
jQuery中的ajax方法分四类,按照功能大小可以这样记:
load()方法-->$.get()方法和post()方法-->$.ajax()方法
$.getScript()方法和$.getJson()方法主要是根据加载的不同文件
除了$.ajax()方法,注意三类方法的参数设置及其中callback的使用
对于序列化元素,主要是简化data中数据
这样整个jQuery中的ajax就很快掌握了,但还需在实战项目中进行运用哦!
相关文章推荐
- 《锋利的Jquery》笔记(二):Jquery中的Ajax
- JQuery笔记(六)-Ajax
- jQuery学习笔记:Ajax(一)
- Jquery学习笔记——Ajax
- jquery中ajax学习笔记3
- jquery中ajax学习笔记一
- jQuery学习笔记:Ajax(一)
- 《锋利的jQuery》之jQuery与Ajax
- learning jQuery 学习笔记十六(+jQuery 1.4.1 API)-- AJAX----$.get() & $.post()
- learning jQuery 学习笔记十五(+jQuery 1.4.1 API)-- AJAX----load(url, [data], [callback])
- jQuery学习笔记--jQuery的ajax方法调用实例
- jQuery学习笔记:Ajax(二)
- Jquery学习笔记之ajax
- jQuery学习笔记:Ajax(一)
- 【jQuery学习笔记】关于jQuery1.6.1版的ajaxstart不执行问题解决方案
- 锋利的jquery 笔记 第6章 ajax
- 《锋利的jQuery》要点归纳(五)jQuery与ajax的应用(下)
- JQuery学习笔记 [Ajax] (6-1)
- jquery中ajax学习笔记4
- jQuery学习笔记--ajax查询,jQuery解析返回的json数据 详解