Jquery总结
2018-01-25 13:46
211 查看
一、Ajax
什么是Ajax?
无刷新状态更新页面，其不是js中的单一技术，而是一串技术的合集，异步提交
其中包含：
js(用户与网页的交互)
XMLHTTPRequest对象（在不终止浏览器的情况下，向服务器发送请求）
服务器上的文件，以xml、json、php的格式保存
其他的js,来处理返回的值
优势：
提升用户的性能
不需插件
减轻服务器与带宽的负担
缺点：
IE低版本不支持
没有前进、后退按钮
缺乏调试工具
搜索引擎缺乏（爬虫不认识）
Jquery对Ajax进行了三层封装：
第一层：$ajax()
写法：
$(function(){
$("xx").click(function(){
$.ajax({
});
});
});
这是最层的方法，其他所有的方法都是被封装到$ajax()当中的，其只有一个参数，用来传递键值对的对象，
可以用来代替其他所有的方法，写几个常用的参数
url string
type string(默认是get)
data string或 object(发送到服务器上的数据)
datatype string(返回的参数类型，如：xml/json/html)
success function(成功后调用的参数)
error function(失败后调用的参数)
第二层：$post()、$get()、load()
load(url,data,callBack)
url:必须，地址，string类型
data:不必须，Object类型，key-value
callBack:不必须,返回的结果success或者error
例子：
<script>
$(function(){
$("#btn").click(function(){
$("#p1").load('index.html');
});
});
</script>
<body>
<button id="btn">ajax练习</button>
<p id="p1"></p>
</body>
----------------------------------------------
注：$("#p1").load('index.html .xx');选择器的筛选
onload()方法是局部方法，不需要指定$,他需要的是一个jquery的对象前缀。更适合异步获取；
$.get()和$.post()是全局方法需要指定。更适合传递参数
向服务器提交数据的两种方式get和post:，只是比load多一个type属性
本身是纯文本，强行xml或者json格式，无法获取数据
默认xml格式
$.get()方法<其中默认是get方法>
在load()中的使用
例：$("#p1").load('index.php?url=lina');
$.get()方法使用
$.post()方法
在load()中的使用
例：$("#p1").load('index.php',{
&
b42d
nbsp; url:'lina'
});
在数据载入完毕之后，就能使用回调函数callBack三个参数responseText请求返回 ,textStatus请求状态 ,XMLHttpResponse对象
$("#p1").load('index.php',{
url:'lina'
},function(response,status,xhr){
});
status:success或error
$.post()方法的使用
第三层：$getScript()、$getJSON()
$getScript()
一般的我们引入的文件，不管是否用到都会被加载进来，但是用到getScript之后，只在用到的时候加载，不用的时候不加载
$getJSON()
读取一般JSON文件
表单序列化
例子：
表单元素多的时候非常的不方便，就出现了表单序列化
$('form').serialize();得到字符串的键值对<序列化>
decodeURIComponent();<反序列化>
$.ajaxSetup({});初始化重复的属性
$.param()解data传递的数据
********************************************************
学习阶段，及时更新
什么是Ajax?
无刷新状态更新页面，其不是js中的单一技术，而是一串技术的合集，异步提交
其中包含：
js(用户与网页的交互)
XMLHTTPRequest对象（在不终止浏览器的情况下，向服务器发送请求）
服务器上的文件，以xml、json、php的格式保存
其他的js,来处理返回的值
优势：
提升用户的性能
不需插件
减轻服务器与带宽的负担
缺点：
IE低版本不支持
没有前进、后退按钮
缺乏调试工具
搜索引擎缺乏（爬虫不认识）
Jquery对Ajax进行了三层封装：
第一层：$ajax()
写法：
$(function(){
$("xx").click(function(){
$.ajax({
});
});
});
这是最层的方法，其他所有的方法都是被封装到$ajax()当中的，其只有一个参数，用来传递键值对的对象，
可以用来代替其他所有的方法，写几个常用的参数
url string
type string(默认是get)
data string或 object(发送到服务器上的数据)
datatype string(返回的参数类型，如：xml/json/html)
success function(成功后调用的参数)
error function(失败后调用的参数)
第二层：$post()、$get()、load()
load(url,data,callBack)
url:必须，地址，string类型
data:不必须，Object类型，key-value
callBack:不必须,返回的结果success或者error
例子：
<script>
$(function(){
$("#btn").click(function(){
$("#p1").load('index.html');
});
});
</script>
<body>
<button id="btn">ajax练习</button>
<p id="p1"></p>
</body>
----------------------------------------------
注：$("#p1").load('index.html .xx');选择器的筛选
onload()方法是局部方法，不需要指定$,他需要的是一个jquery的对象前缀。更适合异步获取；
$.get()和$.post()是全局方法需要指定。更适合传递参数
向服务器提交数据的两种方式get和post:，只是比load多一个type属性
本身是纯文本，强行xml或者json格式，无法获取数据
默认xml格式
$.get()方法<其中默认是get方法>
在load()中的使用
例：$("#p1").load('index.php?url=lina');
$.get()方法使用
$.post()方法
在load()中的使用
例：$("#p1").load('index.php',{
&
b42d
nbsp; url:'lina'
});
在数据载入完毕之后，就能使用回调函数callBack三个参数responseText请求返回 ,textStatus请求状态 ,XMLHttpResponse对象
$("#p1").load('index.php',{
url:'lina'
},function(response,status,xhr){
});
status:success或error
$.post()方法的使用
第三层：$getScript()、$getJSON()
$getScript()
一般的我们引入的文件，不管是否用到都会被加载进来，但是用到getScript之后，只在用到的时候加载，不用的时候不加载
$getJSON()
读取一般JSON文件
表单序列化
例子：
表单元素多的时候非常的不方便，就出现了表单序列化
$('form').serialize();得到字符串的键值对<序列化>
decodeURIComponent();<反序列化>
$.ajaxSetup({});初始化重复的属性
$.param()解data传递的数据
********************************************************
学习阶段，及时更新
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 