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方法已經幫我們做了編碼處理。
例子:
. 代碼如下:
$(function(){
$('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對象組成的數組。
$('#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是一個形如{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
//對象，方便查找。
//追加之前先清空
$('#tb1').empty();
$('#tb1').append(
'<tr><td>制造商:'
+ $(data).find('company').text()
+' 價格:' + $(data).find('price').text()
+' </td><td>車身大小:'
+ $(data).find('size').text()
+ ' 門數:' + $(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'>該車型信息暫時不可用</td></tr>");
$('#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(),