jQueryで外部テキストファイルを表示してみました。
テキストの他にHTMLファイルも表示できますので応用次第で色々出来るかと思います。
スクリプトとサンプル
記述の方法を変えていますが、結果はすべて同じです。
jQuery本体は、Google Hosted Libraries の バージョン1.9.1 を使用します。
jQuery本体は、Google Hosted Libraries の バージョン1.9.1 を使用します。
.load()でテキストファイルを読込み
$(function() {
$("#read_text").load("sample_txt.txt");
});
$.getでテキストファイルを読込み
$(function() {
$.get("sample_txt.txt", function(data){
$("#read_text").text(data);
});
});
$.ajaxでテキストファイルを読込み
$(function() {
$.ajax({
url:'sample_txt.txt',
success: function(data){
$("#read_text").text(data);
}
});
});
スクリプトの処理内容
.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);
}
});
サーバーに設置すると問題ないですが、ローカルだと、レスポンスの受信あるいは処理が出来ません。その場合は、「dataType」オプションを設定します。
僕の環境（ Windows10 ）の場合、Firefoxは動きますが、IE・Chrome は動きません。
Brackets の ライブプレビュー なら、Chrome も確認可。
$.ajax({
url:'sample_txt.txt',
dataType: 'text',
・・・・・・・・・
//dataType: 'text', テキストの場合
//dataType: 'html', HTMLの場合