jQuery-ajax

Ajax:

1、load()方法：

//无参数传递，则是get方式：

$("#resText").load("test.php" , function(){

});

//有参数传递，则是post方式

$("#resText").load("test.php" , {name:"rain" , age:"22"},function(){

});

Eg：

$(function(){

$("#send").click(function(){

$("#resText").load("test.html");

});

});

当只需要test.html中的某一项的时候，只需要将url改写成load("test.html  .para");

在load方法中，对于必须在加载完成后才能继续的操作，load提供了回调函数，包含3个参数，分别代表请求返回的内容，请求状态，XMLHttpRequest对象

$("#resText").load("test.html" ,

function(responseText , textStatus ,XMLHttpRequest){

})

在load方法中，无论Ajax请求是否成功，只要请求完成后就会触发回调函数

2、$.get()

$.get()的回调函数有2个参数

function(data , textStatus){

//data:   返回的内容

//textStatus:   请求状态：success，error，notmodified，timeout

}

只有在数据成功返回success后才能被调用回调函数

3、$.get()的返回数据格式：

HTML片段：

function(data , textStatus){

$("#resText").html(data); //返回的内容添加到页面上

}

Xml文档：

function(data , textStatus){

var username = $(data).find("comment").attr("username");

var content = $(data).find("comment content").text();

var textHtml = "<div class="comment"><h6>"

+ username + ":</h6><p class="para">"

+ content + "</p></div>"

$("#resText").html(data); //返回的内容添加到页面上

}

Json：

function(data , textStatus){

var username = data.username;

var content = data.content;

var textHtml = "<div class="comment"><h6>"

+ username + ":</h6><p class="para">"

+ content + "</p></div>"

$("#resText").html(data); //返回的内容添加到页面上

}在后面添加第四个参数，"json"

4、jQuery提供了一个$.getScript()方法直接加载js文件

$(function(){

//在加载js文件后直接执行回调函数

$.getScript(‘test.html‘ , function(){

$("#go").click(function(){

$(".block").animate({backgroundColor : ‘pink‘},1000)

})

})

})

5、$.getJSON()方法用来加载JSON文件

$(function(){

$(‘send‘).click(function(){

$.getJSON("test.json");

})

})

//单击加载后是在网页上看不到任何效果的，需要一个回调函数，处理返回的数据

$(function(){

$(‘send‘).click(function(){

$.getJSON("test.json" ， function(data){

//data  返回的数据

});

})

})

6、jQuery提供一个通用的遍历方法：$.each(),用于遍历数组以及对象

7、$.each()函数不同于jQuery对象的each（）方法，它是一个全局变量，不操作jQuery对象，而是以一个数值或者对象i第一个参数，以一个回调函数作为第二个参数，回调函数拥有两个参数，第一个为对象成员或者数组的索引，第二个为对应的变量或者内容

$.each()函数中，要退出each循环只要false即可

$(function(){

$(‘send‘).click(function(){

$.getJSON("test.json" ， function(data){

$(‘#resText‘).empty();

var html = " ";

$.each(data , function(commentIndex , comment){

html += ‘<div class="comment"><h6>‘

+ comment[‘username‘] + ‘:</h6><p class="para">‘

+ comment[‘content‘] + ‘</p></div>‘

});

$(‘#resText‘).html(html);

});

})

})

8、$.ajax()方法是jQuery最底层的方法，上述的所有方法都可以使用该方法代替

代替$.getSON()方法：

$(function(){

$(‘#send‘).click(function(){

$.ajax({

type : "GET"，

url ： "test.json",

dataType ： "json",

success : function(data){

$(‘#resText‘).empty();

var html = " ";

$.each(data , function(commentIndex , comment){

html += ‘<div class="comment"><h6>‘

+ comment[‘username‘] + ‘:</h6><p class="para">‘

+ comment[‘content‘] + ‘</p></div>‘

});

$(‘#resText‘).html(html);

}

})

})

})

9、序列化元素：serialize（）方法，作用于一个jQuery对象，将DOM内容序列化为字符串

<form id="form1" action="#">

</form>

//使用$.get()

$("#send").click(function(){

$.get("get1.php" , {

username :　$("#username").val(),

content : $("#content").val()

} , function(data ,textStatus){

$("#resText").html(data);

})

})

//序列化

$("#send").click(function(){

$.get("get1.php" , $("#form1").serialize() , function(){

$("#resText").html(data);

})

})

当复选框以及单选框序列化为字符串的时候，只会对选中的值序列化

10、serializeArray（），不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据，也就是一个对象，可以使用each函数迭代输出

11、$.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

12、想某个Ajax请求不受全局方法的影响，可以在$.ajax（）方法中，将参数global设置为false

Ajax全局事件：