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);
   })
  });
 });

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

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

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

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

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

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