jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

Jquery非同期通信でローカルのファイルを読み込む

2014年3月7日
この記事は掲載から1960日経過しています。
情報が古い可能性が有りますのでご了承下さい

jquery非同期通信で割と利用頻度が高いかな、と思われる処理です。

サンプル

ローカルにあるファイルを読み込み、指定箇所に表示します。

単純に読み込むだけ

[js]
$(function(){
$("#str").load("01/01.html"); //デフォルトで読み込む
});
[/js]

クリックで変更する場合

[js]
$(function(){
$("#str").load("01/01.html"); //デフォルトで読み込む

$("#sel a").click(function(e){ //<ul id="sel">内のAタグをクリックしたら
var Id = $(this).attr("id"); // idを得る
$("#str").load("01/"+Id); //01.html
e.preventDefault(); //イベントの停止
});
});
[/js]

リンクをクリックしたときに、どのファイルを表示するかは様々な方法があると思いますが、ここではAタグのidにファイル名を書いておき、それを表示するようにしています。

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP