快捷導(dǎo)航

jquery對(duì)ajax的支持介紹

更新時(shí)間：2013年12月10日 17:13:13 作者：

本文為大家介紹下jquery對(duì)ajax的支持性，感興趣的朋友可以了解下

1.三個(gè)方法

1.1.load方法

//作用：將服務(wù)器返回的數(shù)據(jù)直接添加到符合要求的dom對(duì)象上
//相當(dāng)于 obj.innerHTML = 服務(wù)器返回的數(shù)據(jù)

用法:
$obj.load(url,[請(qǐng)求參數(shù)]);

url : 請(qǐng)求地址
請(qǐng)求參數(shù) :
第一種形式：請(qǐng)求字符串，比如: 'username=zs&age=22'
第二種形式：對(duì)象,比如 {'username':'zs','age':22}

//注意：
//a, load方法如果沒有參數(shù)，會(huì)使用get方式發(fā)請(qǐng)求。如果有參數(shù)，會(huì)使用post方式發(fā)請(qǐng)求。
//b, 如果有中文參數(shù)值，load方法已經(jīng)幫我們做了編碼處理。

例子:

復(fù)制代碼代碼如下:

 
$(function(){ 
$('a.s1').toggle(function(){ 
var airline = $(this).parent().siblings().eq(0).text(); 
$(this).next().load('priceInfo.do','airline=' + airline); 
$(this).html('顯示經(jīng)濟(jì)艙價(jià)格'); 
},function(){ 
$(this).next().empty(); 
$(this).html('顯示所有票價(jià)'); 
}); 
}); 

1.2.$.get()和$.post()方法

//作用：向服務(wù)器發(fā)送get或者post請(qǐng)求 (get請(qǐng)求ie有緩存問題)

用法:
$.get(url,[data],[callback],[type]);
$.post(url,[data],[callback],[type]);

url : 請(qǐng)求地址
data : 請(qǐng)求參數(shù)，形式同上。
callback : 回調(diào)函數(shù)，可以通過該函數(shù)來處理服務(wù)器返回的數(shù)據(jù)。
callback格式：

function(data,statusText)，

其中，data可以獲得服務(wù)器返回的數(shù)據(jù),
statusText是一個(gè)簡(jiǎn)單的字符串，描述服務(wù)器處理的狀態(tài)。

type : 服務(wù)器返回的數(shù)據(jù)類型，類型可以是:
html : 返回的是html內(nèi)容。
text : 返回的是text。
json : 返回的是json字符串
xml : 返回的是dom兼容的xml對(duì)象
script: 返回的javascriptz

例子:

復(fù)制代碼代碼如下:

 
function quoto(){ 
$.post('quoto.do',function(data){ 
//如果服務(wù)器返回的數(shù)據(jù)是json字符串, 
//會(huì)自動(dòng)轉(zhuǎn)換成js對(duì)象或者json對(duì)象組成的數(shù)組。 
$('#tb1').empty(); 
for(i=0;i<data.length;i++){ 
$('#tb1').append( 
'<tr><td>' + data[i].code 
+ '</td><td>' + data[i].name 
+ '</td><td>' + data[i].price 
+ '</td></tr>'); 
} 
},'json');t 
} 

1.3.$.ajax(options):

//options是一個(gè)形如{key1:value1,key2:value2...}的js對(duì)象，用于指定發(fā)送請(qǐng)求的選項(xiàng)。

選項(xiàng)參數(shù)如下：

url(string) : //請(qǐng)求地址
type(string) : //GET/POST
data(object/string) : //發(fā)送到服務(wù)器的數(shù)據(jù)
dataType(string) : //預(yù)期服務(wù)器返回的數(shù)據(jù)類型
success(function) : //請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)，有兩個(gè)參數(shù)：
function(data,textStatus),
其中，data是服務(wù)器返回的數(shù)據(jù),
textStatus 描述狀態(tài)的字符串。
error(function) : //請(qǐng)求失敗時(shí)調(diào)用的函數(shù)，有三個(gè)參數(shù)
function(xhr,textStatus,errorThrown),
其中xhr是底層的ajax對(duì)象(XMLHttpRequest),
textStatus,errorThrown這兩個(gè)參數(shù)其中的
一個(gè)可以獲得底層的異常描述。
async:true(缺省)/false : //當(dāng)值為false時(shí)，發(fā)送同步請(qǐng)求。

例子:

復(fù)制代碼代碼如下:

 
$(function(){ 
$('#s1').change(function(){ 

$.ajax({ 
'url':'carInfo.do', 
'type':'post', 
'data':'carName='+$('#s1').val(), 
'dataType':'xml', 
'success':function(data){ 
//data是服務(wù)器返回的數(shù)據(jù) 
//如果返回的是xml文檔，我們需要使用 
//$函數(shù)將其包裝$(data)成一個(gè)jQuery 
//對(duì)象，方便查找。 
//追加之前先清空 
$('#tb1').empty(); 
$('#tb1').append( 
'<tr><td>制造商:' 
+ $(data).find('company').text() 
+' 價(jià)格:' + $(data).find('price').text() 
+' </td><td>車身大小:' 
+ $(data).find('size').text() 
+ ' 門數(shù):' + $(data).find('door').text() 
+ '</td><td>排量: ' 
+ $(data).find('vol').text() 
+ ' 加速性能:' 
+ $(data).find('speed').text() 
+ '</td></tr>'); 
//要將表格顯示出來 
$('#tips').slideDown('slow'); 
setTimeout(function(){ 
$('#tips').fadeOut('slow'); 
},2000); 
}, 
'error':function(){ 
$('#tb1').append( 
"<tr><td colspan='3'>該車型信息暫時(shí)不可用</td></tr>"); 
$('#tips').slideDown('slow'); 
} 
}); 
}); 
}); 

例子2:
解決中文亂碼問題:

復(fù)制代碼代碼如下:

 
$.ajax({ 
'url':'netctoss7/ajaxCode', 
'type':'post', 
'data':{name:value}, 
'dataType':'json', 
'async':false, 
'success':function(data){ 
if(data){ 
$('#msg_verCode').text(''); 
v1=true; 
}else{ 
$('#msg_verCode').text('驗(yàn)證碼錯(cuò)誤'); 
} 
} 
}); 

2.兩個(gè)輔助性的方法

2.1.serialize():

//將jquery對(duì)象包含的表單或者表單控件轉(zhuǎn)換成查詢字符串。

2.2.serializeArray():

//轉(zhuǎn)換為一個(gè)數(shù)組，每個(gè)數(shù)組元素形如{name:fieldName,value:fieldVal}的對(duì)象。
//序列化元素的作用，主要是用于ajax請(qǐng)求中，給data賦值。

說明:
只能用于表單或者表單控件
直接把表單的name和對(duì)應(yīng)的value值發(fā)送出去,形如:name=value

例子:

復(fù)制代碼代碼如下:

 
$.ajax({})中 
//'data':'carName='+$('#s1').val(), 
'data':$('#s1').serialize(), 

//'data':{'carName':$('#s1').val()}, 
'data':$('#s1').serializeArray(), 