関連

• JavaScript
• jQuery
• ajax

概要

ajaxの枠組みがないフレームワーク等の環境でとりあえずajaxさせたいときのTips。

• 前提条件が次のような感じだとして
  • ajaxする仕組みが特別ない
  • ページを出力する枠組みしかない
  • jQueryが使える

方法

• ページをふたつ作る
  • ajaxしたいページ
  • 動的に切り替わる要素を書いたページ(別ページ)
• ajaxしたいページから別ページを呼ぶ
  • $.ajax()を使う(jQeury)
• ajaxしたいページの要素を書き換える
  • 別ページの要素を選択して
  • ajaxしたいページに入れ込む

var formData = $(フォームのセレクタ).serializeArray();
$.ajax({
	type: 'POST',
	url: 別ページのURL,
	data: formData,
	dataType: 'html',
	cache: false,
	success: function(html) {
		var div = $(html).filter(抜き出したい要素のセレクタ);
		// 正常時
		if ($(div).size() > 0) {
			$(入れ込みたい要素のセレクタ).html($(div).html());
		}
		// エラー時（抜き出したい要素が拾えないとき）
		else {
			alert('ダメでした。');
		}
	},
	// エラー時（通信的エラーのとき）
	error: function(XMLHttpRequest, textStatus, errorThrown) {
		alert('ダメでした。');
	}
});

解説

$(フォームのセレクタ).serializeArray()

JSON形式のデータ構造を取得する。

$.ajax({
	・
	・
	・
  success: function(){},
    error: function(){}
});

ajaxして成功時、失敗時の関数をそれぞれ実行する。

$(html).filter(抜き出したい要素のセレクタ);

読み込んだページから要素を選択する。

参考

• http://semooh.jp/jquery/api/ajax/serializeArray/+/
• http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/
• http://semooh.jp/jquery/api/traversing/filter/expr/