この記事で使用したjQueryのバージョンですが
1.3.2
となっております。
最近は
$(document).ready(function(){
・・・
}
こっちを使っていて、loadの方はあまり使わないんですが
以前は結構使ってたんですよね～
久々に使ってみたら結構はまった部分もあったので
備忘録的な感じでまとめておこうかと思います。
では早速。
とにもかくにもhtmlのソースになります。
これで動くのでこのソースが皆さんの参考になればうれしいです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>サンプル</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
function funcGet(){
callLoad("#areaGet","/load/get","text=getgetgetget",function(){});
}
function funcPost(){
callLoad("#areaPost","/load/post",{text: "postpostpost"},function(){});
}
function callLoad(area,url,param,func){
$(area).load(
url,
param,
func
);
}
</script>
</head>
<body>
<div>
<dl>
<dt>GETでやってみる</dt>
<dd>
<div id='areaGet'></div>
<script>funcGet()</script>
</dd>
<dt>POSTでやってみる</dt>
<dd>
<div id='areaPost'></div>
<script>funcPost()</script>
</dd>
</dl>
</div>
</body>
</html>
あれこれやりながら書いてみました。
ちなみに
↓動かした結果の絵がこちらです。
サーバ側の処理は
textパラメータで受け取った文字列を大文字にして返却する
というものになります。
で、途中いくつかはまったのでそれを書いていきます。
はまった箇所1：GET/POSTの送り分け
load関数はパラメータの送り方によって
GETかPOSTかが決まります。
オブジェクトならPOST、文字列ならGET。
最初どう指定するのか分からず・・・
本家サイトのドキュメントを確認したらちゃんと書いてありました。
.load() | jQuery API Documentation
困った時に読みに行くんじゃなくて使う前に読めって感じですよね。。
はまった箇所2：サーバの返却値が反映されない！
サーバ側からちゃんと返してるのに
HTMLに反映されない！
まぁこれは自分のHTMLの書き方が問題だったのですが
<dt>GETでやってみる</dt>
<dd>
<script>funcGet()</script>
<div id='areaGet'></div>
</dd>
最初こんな感じで書いてたんですが
loadが動いたとき（funcGet関数が呼ばれた時）にはまだ #areaGet がdocument上にないため
サーバから受け取った文字列が反映できなかった、ということでした。
scriptタグを後ろに移動することで無事に反映。
でもドキュメントには
$( "#result" ).load( "ajax/test.html" );
If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent.
セレクタ部分がないとloadは動かない的なことが書いてあるんだけどなぁ
セレクタを存在しないのに変えてもサーバ側には送られちゃってるし。。
最後の
Ajax request will not be sent.
はそういう意味じゃないのかな。
こんな使い方
冒頭で
以前は結構使ってたんですよね～
と書きましたが、使っていたところを見直してみたら
結構いい感じに使ってたのでご紹介します。
（というか本来はこう使うべきか・・・）
とある管理画面で、
商品の詳細画面を開くと最初は概要だけ表示され、
[詳細を見る]ボタンを押すと、画面遷移せずにデータが補完される感じです
流れ的にはこんな感じ
- 詳細を見るボタンを押してload関数をキック
- サーバ側の処理が動いて詳細情報を取得し、別Viewが呼ばれる（遷移する）
- 別View（遷移先）にてサーバから返却された詳細データの体裁を整える
- loadに指定されたセレクタにそのViewを表示する
別Viewは詳細を表示する部分だけのHTMLになるイメージです
以上です。