関連†
- 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(抜き出したい要素のセレクタ);
読み込んだページから要素を選択する。