jqueryのajaxサポートの紹介
5023 ワード
1.三つの方法1.1.loadメソッド//役割:サーバから返すデータを要求に合致するdomオブジェクトに直接追加//objに相当する.innerHTML=サーバが返すデータの使い方:$obj.load(url,[要求パラメータ]);url:要求アドレス要求パラメータ:第1の形式:要求文字列、例えば:'username=zs&age=22'第2の形式:オブジェクト、例えば{'username':'zs'、'age':22}//注意://a、loadメソッドはパラメータがなければget方式で要求を発行します.パラメータがある場合はpost方式でリクエストします.//b,中国語パラメータ値があればload法が符号化処理を手伝ってくれた.例:
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
例:
1.3.$.ajax(options):
//optionsは{key 1:value 1,key 2:value 2...}のような形です.のjsオブジェクトで、リクエストを送信するオプションを指定します.
オプションのパラメータは次のとおりです.
url(string)://要求アドレス
type(string) ://GET/POST
data(object/string)://サーバに送信されるデータ
DataType(string)://サーバから返されるデータ型を期待
success(function)://リクエストが成功した後に呼び出されるコールバック関数.2つのパラメータがあります.
function(data,textStatus),
ここでdataはサーバが返すデータであり、
textStatusは、ステータスを記述する文字列です.
Error(function)://リクエストに失敗したときに呼び出される関数で、3つのパラメータがあります.
function(xhr,textStatus,errorThrown),
ここでxhrは最下位のajaxオブジェクト(XMLHttpRequest)であり、
textStatus,errorThrownの2つのパラメータのうちの
最下位レベルの異常記述が得られる.
async:true(デフォルト)/false://falseの値がfalseの場合、同期要求が送信されます.
例:
例2:
中国語の文字化けし問題を解決する:
2.2つの補助的な方法
2.1.serialize():
//jqueryオブジェクトに含まれるフォームまたはフォームコントロールをクエリー文字列に変換します.
2.2.serializeArray():
//{name:fieldName,value:fieldVal}のような各配列要素を持つ配列に変換します.
//シーケンス化要素の役割は、主にajaxリクエストでdataに値を割り当てるために使用されます.
説明:
フォームまたはフォームコントロールのみ
フォームのnameと対応するvalue値を直接送信します.例えば、name=value
例:
$(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$('#tb1').append(
'' + data[i].code
+ '' + data[i].name
+ '' + data[i].price
+ '');
}
},'json');t
}
1.3.$.ajax(options):
//optionsは{key 1:value 1,key 2:value 2...}のような形です.のjsオブジェクトで、リクエストを送信するオプションを指定します.
オプションのパラメータは次のとおりです.
url(string)://要求アドレス
type(string) ://GET/POST
data(object/string)://サーバに送信されるデータ
DataType(string)://サーバから返されるデータ型を期待
success(function)://リクエストが成功した後に呼び出されるコールバック関数.2つのパラメータがあります.
function(data,textStatus),
ここでdataはサーバが返すデータであり、
textStatusは、ステータスを記述する文字列です.
Error(function)://リクエストに失敗したときに呼び出される関数で、3つのパラメータがあります.
function(xhr,textStatus,errorThrown),
ここでxhrは最下位のajaxオブジェクト(XMLHttpRequest)であり、
textStatus,errorThrownの2つのパラメータのうちの
最下位レベルの異常記述が得られる.
async:true(デフォルト)/false://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(
' :'
+ $(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つの補助的な方法
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(),