jquery對ajax的支持介紹_jquery

1.三個方法

1.1.load方法

//作用：將伺服器傳回的資料直接加入符合要求的dom物件上
//相當於obj .innerHTML = 伺服器傳回的資料

用法:
$obj.load(url,[請求參數]);

url : 請求位址
請求參數:
第一種形式：請求字串，例如: 'username=zs&age=22'
第二種形式：物件,例如{'username':'zs','age':22}

//注意：
//a, load方法如果沒有參數，會使用get方式發送請求。如果有參數，會使用post方式發送請求。
//b, 如果有中文參數值，load方法已經幫我們做了編碼處理。

範例:

複製程式碼 程式碼如下:

程式碼如下:


$🎜( ){
$('a.s1').toggle(function(){
var airline = $(this).parent().siblings().eq(0).text();
$(this).next().load('priceInfo.do','airline=' airline);
$(this).html('顯示經濟艙價格');
},function( ){
$(this).next().empty();

$(this).html('顯示所有票價');
});
});



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

//作用：向伺服器發送get或post請求(get請求ie有快取問題)

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

url : 請求位址
data : 請求參數，形式同上。
callback : 回呼函數，可以透過該函數來處理伺服器傳回的資料。
callback格式：

function(data,statusText)，

其中，data可以獲得伺服器傳回的資料,
statusText是一個簡單的字串，描述伺服器處理的狀態。

type : 伺服器回傳的資料型，型別可以是:
html : 回傳的是html內容。
text : 回傳的是text。
json : 回傳的是json字串
xml : 回傳的是dom相容的xml物件

script: 傳回的javascriptz 範例: 範例:

範例:



例
範例:



範例:



例

範例:



例如🎜>
複製程式碼


程式碼如下:


function quoto(){
$.post('quoto.do',function(data) {
//如果伺服器傳回的資料是json字串,
//會自動轉換成js物件或json物件組成的陣列。 🎜>for(i=0;i$('#tb1').append(
' ' data[i].code
' ' data[i].name
' ' data[i].price
' ');
}
},'json');t
}

1.3.$.ajax(options): //options是一個形如{key1 :value1,key2:value2...}的js對象，用於指定發送請求的選項。 選項參數如下：

url(string) : //請求位址type(string) : //GET/POST data(object/string) : //傳送到伺服器的資料dataType(string) : //預期伺服器回傳的資料型別success(function) : //請求成功後呼叫的回呼函數，有兩個參數： function(data ,textStatus), 其中，data是伺服器傳回的資料, textStatus 描述狀態的字串。 error(function) : //請求失敗時呼叫的函數，有三個參數function(xhr,textStatus,errorThrown), 其中xhr是底層的ajax物件(XMLHttpRequest), textStatus ,errorThrown這兩個參數其中的一個可以得到底層的異常描述。 async:true(預設)/false : //當值為false時，發送同步請求。 範例: 複製程式碼 程式碼如下:

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

$.ajax({
'url':'carInfo. do',
'type':'post',
'data':'carName=' $('#s1').val(),
'dataType':'xml',
'success':function(data){
//data是伺服器傳回的資料
//如果傳回的是xml文檔，我們需要使用
//$函數包裝$(data)成一個jQuery
//對象，方便查找。
' 製造商:'
$(data).find('company').text()
' 價格:' $(data).find('price') .text()
' 車身大小:'
$(data).find('size').text()
' 閘數:' $(data). find('door').text()
' 排氣量: '
$(data).find('vol').text()
' 加速效能: '
$(data).find('speed').text()
' ');
//要將表格顯示出來
$(' #tips').slideDown('slow');
setTimeout(function(){
$('#tips').fadeOut('slow');
},2000);
},
'error':function(){
$('#tb1').append(
"此車型資訊暫時無法使用");
$('#tips').slideDown('slow');
}
});
});
});


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

複製程式碼 程式碼: $.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('驗證碼錯誤');
}
}
} );



2.兩個輔助性的方法

2.1.serialize():

//將jquery物件包含的表單或表單控制項轉換成查詢字串。

2.2.serializeArray():

//轉換為一個數組，每個數組元素形如{name:fieldName,value:fieldVal}的物件。
//序列化元素的作用，主要用於ajax請求中，賦值給data。

說明:
只能用於表單或表單控制項
直接把表單的name和對應的value值發送出去,形如:name=value

範例:

複製代碼 代碼如下: $.ajax({})中

// 'data':'carName=' $('#s1').val(),

'data':$('#s1').serialize(),

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