jQueryによるAjax処理

f:id:nipe880324:20150311133550j:plain
Photo by Flickr: josemanuelerre's Photostream

1. $.get

$.getメソッドで、Ajaxで'/data.json'にGETリクエストを行います。

$.get('/data.json', function(data) {
  // 成功時に行われる処理
  console.log('callback' + data);
})
.fail(function(data) {
  // 失敗時に行われる処理
  console.log('Failed');
});

2. $.post

$.postメソッドで、Ajaxで'/post.php'にPOSTリクエストを行います。

$.post('/post.php', {
  // 第二引数は、POSTするパラメータ
  title: 'Post Title',
  body:  'Post Content'
}, function(data) {
  // 成功時に行われる処理
  console.log('callback' + data);
})
.fail(function(data) {
  // 失敗時に行われる処理
  console.log('Failed');
});

3. $.load

$.loadはHTMLを読み込み、DOMに挿入します。
なんどload()を実行してもappend()のように要素は追加されません。

$(document).ready(function(){

  // イベント処理の登録
  $("#todo-list").on("click", function() {
    loadTodos( $(this) );
  });

  // 指定したエレメントにTodoをロードする
  // 第一引数 : HTMLを読み込むURL
  // 第二引数 : パラメータ。指定するとPOSTメソッドになる。
  // 　　　　　GETでパラメータを渡したい場合はURLにクエリストリング(?id=xxx&q=yyy)で指定する(省略化)
  // 第三引数：通信完了後に実行されるコールバック
  var loadTodos = function (element) {
    element.load("/todos/index.html", function() {
      // 通信完了時のコールバック関数
    });
  };

});