Ajaxを利用するための命令 ファイルを読み込むload()

ヒダカ

2009年11月14日 18:00

ASCII.jp:jQueryでAjaxを利用する基本チュートリアル|Web制作の現場で使えるjQuery UIデザイン入門

上記リンクを参考に実際に書いてみた。

load()は指定したテキストファイルやhtmlファイルを読み込む命令。
注意として、文字コードがutf-8推奨、同一ドメインのファイルしか読み込めない、などなど。

以下は、loadボタンを押すとサイドバーの「最新の記事」(正確にはトップページのサイドバーにある「最新の記事」)をボタンの下に読み込みます。

$(function(){$("#load button").click(function(){$("#load div").load("http://webdesign.naganoblog.jp/ div.recententry");});})
load

ここに読み込みます。



コードは以下の通り。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#load button").click(function(){
$("#load div").load("http://webdesign.naganoblog.jp/ div.recententry");
});
})
</script>

<div id="load">
<button>load</button>
<div><p>ここに読み込みます。</p></div>
</div>

関連記事