読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

jQueryによるAjax処理

Javascript jQuery

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

目次

  1. $.get
  2. $.post
  3. $.load

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() {
      // 通信完了時のコールバック関数
    });
  };

});


Ajax時にURLが変わらないので、ブラウザの戻るや進むボタンが使いづらいという問題があります。
それを解決する方法として、PJAXという解決策があります。

参考文献