ajax学习总结

$.ajax()是所有ajax方法中最底层的方法,其它的方法都是基于$.ajax()方法的封装。
这个方法只需要传一个参数对象{},里面都是键值对。
键值对有多个的情况下用逗号分隔,最后一个不要加逗号。
data属性值一般用对象键值对的方式data:{a:4,b:5}

ajax用的最多的就是表单提交,

ajax的两种提交方式:1表单提交 2json字符串提交,使用JSON.stringify(data)

 JSON对象的方法:

JSON.stringify 把一个对象转换成json字符串,
JSON.parse 把一个json字符串解析成对象。  jquery的方法为:$.parseJSON(str);

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
一、传统的表单提交,缺点:表单元素特别多的情况下,写起来麻烦,容易出错。
$(function(){
$("form input[type=submit]").click(function(){
$.ajax({
type:"post",
url:"",
data:{
user:$("form input[name=user]").val(),
email:$("form input[name=email]").val()
},
success:function(response,status,xhr){
$("#box").html(response);
}
});
});

});
二、表单序列化方式:如果有多个表单的情况下,在复制的时候,data就不用修改了。序列化之后的data为字符串形式的键值对,还进行了编码,保证了准确性。
$(function(){
$("form input[type=submit]").click(function(){
$.ajax({
type:"post",
url:"",
data:$('form').serialize(),
success:function(response,status,xhr){
$("#box").html(response);
}
});
});

});
三、对单选框、复选框、下拉框进行的序列化:
$("form input[name=sex]").click(function(){
$(this).serialize();//用于提交时的序列化
decodeURIComponent($(this).serialize());//解码
});
四、怎样生成json数据:
$("form input[name=sex]").click(function(){
$(this).serializeArray();//生成的是json数据
var json= $(this).serializeArray();
$("box").html(json[0].name+"="+json[0].value);
}

五、初始化重复的属性:
$.ajaxSetup({
type:"post",
data:$("form").serialize(),
success:function(){
alert("请求成功后");
},
complete:function(){
alert("请求结束后,不管成功还是结束");
},
beforeSend:function(){
alert("发送请求之前");
},
error:function(){
alert("请求失败后");
}
});
$.ajax({
这里就不用重复上面的属性了……
});

六、data属性值如果是复杂的对象键值对,程序难以解析,这时可以用$.param()方法,将对象转化为字符串键值对格式。param() 方法创建数组或对象的序列化表示。
该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。
data:$.param({user:$("form input[name=user]").val(),
email:$("form input[name=email]").val()
}),
...
七、全局事件$(document).ajaxStar()和$(document).ajaxStop();当请求开始时,显示“正在加载中”,请求结束时隐藏。
$(document).ajaxStart(function(){
$(".loading").show();
}).ajaxStop(function(){
$(".loading").hide();
});
全局事件:
$(document).ajaxError(function(){
alert("错误!");
});

八、如果请求时间太长,可以设置超时:
$.ajax({
type:"",
url:"",
...
timeout:180000 //3分钟(1000毫秒=1秒)
//超时后的处理:
error : function(xhr,textStatus){
if(textStatus=='timeout'){
//处理超时的逻辑
}else{
//其他错误的逻辑
}
}
});
九、如果某个ajax不想触发全局事件,可以在当前的ajax里设置:
$.ajax({

global:false
});

十、跨域请求时,设置返回数据格式为jsonp:
$.ajax({
dataType:"jsonp"
});

十一、jqXHR对象
jqXHR对象就是$.ajax()返回的对象
var jqXHR=$.ajax({
type:"post",
url:"",
data:$('form').serialize()
});//上面只是一些基本的参数,与真正要执行的程序分开来,提高了可读性。
jqXHR.success(function(response){
alert(response);
});
之前的一些方法:.success() .complete() .error()在未来可能会被取消,代替的方法为:
.done() .always() .fail()
所以,如果使用jqXHR对象的话,最好采用后面的方法。
好处:1、可连缀执行 2、课多次执行同一个函数,前面的不会被后面的覆盖。

</script>
<body>
<form action="">
<input type="text" name="user">
<input type="text" name="email">
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<input type="submit" value="提交">
</form>
<span class="loading" style="display:none">正在努力加载中……</span>
<div id="box"></div>
</body>
</html>

posted @ 2016-11-03 21:16  2350305682  阅读(284)  评论(0编辑  收藏  举报