jQuery学習メモ - Ajaxの操作(1) - データの読み込み_jquery

HTML をロード

通常、HTML をロードする方法を使用して HTML フラグメントをロードし、それらを指定された位置に挿入します。

<div></div>
<button>load</button>

同じディレクトリ内の test.html ファイルの内容は次のとおりです:

<span>test</span>

load メソッドを使用して HTML をロードし、それをボタンのクリック イベントにバインドできます。

 $('button').click(function() {
  $('div').load('test.html');
 });

ボタンをクリックした後:

JSON の読み込み

JSON は Javascript Object Notation であり、直訳すると Javascript Object Notation であるため、データを簡単に表現して送信できます。キーと値は二重引用符で囲む必要があり、関数は不正な JSON 値です。

{
  "name": "stephenlee", 
  "sex": "male"
}

上記の JSON データを test.json ファイルに保存します。 getJSON メソッドを使用して JSON データをロードし、それをボタンのクリック イベントにバインドすることもできます:

 $('button').click(function() {
  $.getJSON('test.json');
 });

getJSON メソッドは jQuery のグローバル オブジェクトとして定義されているため、このメソッドを呼び出すには $ を使用する必要があります。ここで、$ は、$() が参照する個々の jQuery オブジェクトではなく、グローバル jQuery オブジェクトを参照します。したがって、getJSON 関数をグローバル関数とも呼びます。
ただし、上記のコードは JSON データを取得するだけで、何の効果も見られないことがわかります。ここでは、getJSON メソッドの 2 番目のパラメーターをコールバック関数として使用して、効果をテストできます。

 $('button').click(function() {
  $.getJSON('test.json', function(data) {
   console.log(data);
   $.each(data, function(index, content) {
    console.log(content);
   })
  });
 });

ボタンをクリックした後、コンソールの出力を見てみましょう:

ここでの各関数の最初のパラメーターは配列またはオブジェクトを受け取ることができ、2 番目のパラメーターは値コールバック関数であり、各ループ内の配列またはオブジェクトの現在のインデックスと値をパラメーターとして受け取ります。

JS の読み込み

ページの最初のロード時にすべての JS ファイルをロードしたくない場合がありますが、現在のディレクトリに JS ファイルがあり、単純なアラートが表示されるとします。

$(function() {
 alert('test');//
})

グローバル関数 getScript を使用してファイルをロードし、ボタンのクリック イベントにバインドできます。

 $('button').click(function() {
  $.getScript('test.js');
 });

ボタンをクリックすると、test.js ファイルがロードされ、アラートが正常にトリガーされます。

XML をロード

XML ドキュメントの役割はデータ ストレージにも関連しているため、XML の読み込み操作は JSON と似ています。

というコンテンツと同じディレクトリに text.xml ファイルを作成します。

<person>
<name>stephenlee</name>
<sex>male</sex>
</person>

get メソッドを直接使用して XML ドキュメントをロードできます。これがデフォルトのメソッドのように見える理由は、AJAX (Asynchronous JavaScript And XML) の正式名からわかります。

また、ボタンクリックイベントにもバインドします:

 $('button').click(function() {
  $.get('test.xml', function(data) {
    console.log(data);
  });
 });

コンソールを表示すると、結果は次のようになります:

XML ドキュメント内の形式が正しくない場合、エラーは報告されませんが、コールバック関数は実行されないことに注意してください。