jQuery-ajax
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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请求是否成功，只要请求完成后就会触发回调函数
|
参数 |
类型 |
说明 |
|
url |
String |
请求HTML页面的url |
|
Data（可选） |
Object |
发送至服务器的key/value数据 |
|
Callback（可选） |
Function |
请求完成时的回调函数，无论请求是否成功 |
2、$.get()
|
参数 |
类型 |
说明 |
|
url |
String |
请求HTML页面的url |
|
Data（可选） |
Object |
发送至服务器的key/value数据 |
|
Callback（可选） |
Function |
请求完成时的回调函数，无论请求是否成功 |
|
Type |
String |
服务器返回内容的格式，包括json，xml，html，script，text，_default |
$.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全局事件：
|
方法 |
说明 |
|
ajaxStart(callback) |
Ajax请求开始时执行的函数 |
|
ajaxEnd(callback) |
Ajax请求结束时执行的函数 |
|
ajaxComplete(callback) |
Ajax请求完成时执行的函数 |
|
ajaxError(callback) |
Ajax请求发生错误时 |
|
ajaxSend(callback) |
Ajax请求发送时 |
|
ajaxSuccess(callback) |
Ajax请求成功时 |
以上是关于jQuery-ajax的主要内容，如果未能解决你的问题，请参考以下文章