GHWEB06.GRASSHOPPER

jQueryで外部テキストファイルを表示する

  • Category:Web関連
  • Web関連の備忘録

yomikomijQueryで外部テキストファイルを表示してみました。
テキストの他にHTMLファイルも表示できますので応用次第で色々出来るかと思います。

スクリプトとサンプル

記述の方法を変えていますが、結果はすべて同じです。
jQuery本体は、Google Hosted Libraries の バージョン1.9.1 を使用します。

.load()でテキストファイルを読込み

$(function() {
$("#read_text").load("sample_txt.txt");
});

サンプル1

$.getでテキストファイルを読込み

$(function() {
$.get("sample_txt.txt", function(data){
$("#read_text").text(data);
});
});

サンプル2

$.ajaxでテキストファイルを読込み

$(function() {
$.ajax({
url:'sample_txt.txt',
success: function(data){
$("#read_text").text(data);
}
});
});

サンプル3

スクリプトの処理内容

.load()でテキストファイルを読込み

/*
$(セレクター).load(ファイル名);で
指定したセレクターにファイルを読み込み
*/
$("#read_text").load("sample_txt.txt");

$.getでテキストファイルを読込み

/*
$.get(“url”, function(data){…}); で
引数 data には url の結果が文字列として格納されます。
url には、取得するファイルを指定
*/
$.get("sample_txt.txt", function(data){

/* #read_text のテキストを data に変更 */
$("#read_text").text(data);
});

$.ajaxでテキストファイルを読込み

$.ajax({
/* 取得するファイルを指定 */
url:'sample_txt.txt',

/* データの取得に成功した場合以下の処理 */
success: function(data){

/* #read_text のテキストを data に変更 */
$("#read_text").text(data);
}
});
RELATED ARTICLE
  • 掲載: