1. 3 つのメソッド
1.1.load メソッド
//機能: サーバーから返されたデータを要件を満たす DOM オブジェクトに直接追加します
// と同等obj .innerHTML = サーバーから返されたデータ
使用法:
$obj.load(url,[リクエストパラメータ]);
url: リクエストアドレス
リクエストパラメータ:
最初の形式: リクエスト文字列、例: 'username=zs&age=22'
2 番目の形式: オブジェクト、例: {'username':'zs','age':22}
//注:
//a、load メソッドにパラメータがない場合は、get メソッドを使用してリクエストを送信します。パラメータがある場合は、post メソッドを使用してリクエストが送信されます。
//b、中国語のパラメータ値がある場合、load メソッドはすでにエンコードを行っています。
例:
$ (function( ){
$('a.s1').toggle(function(){
var航空会社 = $(this).parent().siblings().eq(0).text() ;
$(this).next().load('priceInfo.do','airline=' 航空会社)
$(this).html('エコノミークラスの料金を表示'); ,function( ){
$(this).next().empty();
$(this).html('すべての運賃を表示')
});
1.2.$.get() および $.post() メソッド
//機能: get または post リクエストをサーバーに送信します (get リクエスト、つまりキャッシュあり)問題)
使用法:
$.get(url,[data],[callback],[type]);
$.post(url,[data],[callback],[ type]) ;
url: リクエストアドレス
data: リクエストパラメータ、形式は上記と同じです。
callback: サーバーから返されたデータを処理するために使用できるコールバック関数。
コールバック形式:
function(data, statusText)、
このうち、data はサーバーから返されたデータを取得できます。
statusText は、処理を記述する単純な文字列です。サーバーの状態。
type: サーバーによって返されるデータ型。タイプは次のとおりです。
html: HTML コンテンツを返します。
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
' | ;< /tr>');
}
},'json');t
}
1.3.$.ajax(オプション):
/ /options は、{key1:value1,key2:value2...} の形式の 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 、2 つのパラメーターのうちの 1 つ errorThrown
は、基礎となる例外の説明を取得できます。
async:true (デフォルト)/false: //値が false の場合、同期リクエストを送信します。
例:
コードをコピー コードは次のとおりです: $(function(){
$('#s1').change(function(){
$.ajax({
'url':'carInfo. do',
'type':'post',
'data':'carName=' $('#s1').val(),
'dataType':'xml',
'success':function(data){
//データはサーバーから返されたデータです
//XML ドキュメントが返された場合は、
//$function を使用してそれをラップする必要があります $ (データ) を jQuery に
//簡単に検索できるようにオブジェクト
//追加する前にクリア
$('#tb1').append (
'
gt;メーカー:'
$(data).find('company').text()
' 価格:' $(data).find('price ').text()
' | gt;本体サイズ:'
$(data).find('size').text()
'ドアの数:' $ (data).find('door').text()
' | gt;変位: '
$(data).find('vol').text()
'加速性能:'
$(data).find('speed').text()
' |
');
// table 表示
$('#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;
$('#msg_verCode').text( '検証コード エラー') ;
}
}
});
2. 2 つの補助メソッド
2.1.serialize():
//jquery オブジェクトに含まれるフォームまたはフォーム コントロールをクエリ文字列に変換します。
2.2.serializeArray():
//配列に変換すると、各配列要素は {name:fieldName,value:fieldVal} の形状のオブジェクトになります。
//シリアル化された要素の役割は、主にデータに値を割り当てるための Ajax リクエストで使用されます。
注:
はフォームまたはフォーム コントロールにのみ使用できます
フォームの名前と対応する値を次の形式で直接送信します: name=value
例:
$.ajax({})
// 'data':'carName=' $('#s1').val(),
'data':$('#s1').serialize(),
// 'data' :{'carName':$('#s1').val()},
'data':$('#s1').serializeArray(),
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
