前提・実現したいこと

ただのテキストファイルの内容を、
jQueryの.load()を使い、htmlに表示させたいです。。

発生している問題・エラーメッセージ

object から変換する方法が見つかりません、、

該当のソースコード

sample
1 サンプルメッセージを表示します。

※sample.txtは本当にただテキストを書いているだけです。

jQuery
1 $("div").load("sample.txt");

html
1 <div>/**ここにsample.txtの内容が表示されて欲しい**/</div>

試したこと

色々と変換を試みたのですが、[object Object]と表示されてしまいます。。
ただのテキストの内容をhtmlに表示させるのは無理なのでしょうか。。。

###追記

jQuery
1    var a = $("div").load("sample.txt");
2    console.log(a);

[object Object]{0: HTMLDivElement {...}, jquery: "3.3.1", length: 1, prevObject: Object {...}}

sample
1※テキストファイルの内容です
2 サンプルメッセージを表示します。

初歩

かなり初歩的なことかもしれないのですが教えてください、、、
よろしくおねがいします。。

行動規範の内容に同意します

回答2件

オブジェクトの内容次第です。
console.log()で内容を確認してみては？
そこからオブジェクト内容を参照するように書き換えてください。

別途確認しましたが、提示のコードで読み込みは可能でした。

ただ、ChromeでHTMLそのままでローカルファイルで（file://）読み込もうとすると
Cross-Origin問題が発生しているのではないでしょうか。多分。
（その手のエラーがでていないならまた別の問題かもしれませんけど）

あと、中身だけを確認したいのでしたら・・・
$("div")だと何も無く直接突っ込むことになるので、
下記のようにwindowのloadで読み込ませるといいかもしれません。

js
1    $(window).load("sample.txt", function(data) {
2    	  console.log(data);
3    });

投稿2019/03/12 05:07

編集2019/03/12 06:05

m.ts10806

総合スコア80850

xx_6_6_xx

2019/03/12 05:25

いつもご回答ありがとうございます！コンソールにも[object Object]としか表示されません。。

m.ts10806

2019/03/12 05:28

txtの内容と、実際にコンソールに出力させたコードを質問本文に追記してください

xx_6_6_xx

2019/03/12 05:35

ありがとうございます。。追記しました！

m.ts10806

2019/03/12 05:40

そのconsole.log()だと単にObject Objectという文字列が入った<div>の情報だけになるような。 load()の結果だけを見たほうが良いですね。

m.ts10806

2019/03/12 05:42

あともし侍エンジニア～～を参照しているならやめたほうがいいかもしれません。営業妨害するつもりはないですが、ちょっと信憑性に欠けるところがあります。(少し調べたら何が起きたか出てきます）

xx_6_6_xx

2019/03/12 05:54

確かに、、、load()の結果だけって見れるんでしょうか。。（load()の前って必ず$(タグ名)がいるんでしょうか。。）聞いてばかりですみません、。。あと侍エンジニア（ryの件初めて知りました。。

m.ts10806

2019/03/12 06:06

load結果の件、追記しました。サーバー上では元のコードでも正常に読み込まれたので別問題かもしれません。

xx_6_6_xx

2019/03/12 06:15

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>404 Not Found</title> </head><body> <h1>Not Found</h1> <p>The requested URL sample.txt was not found on this server.</p> </body></html> と表示されました…！これはもしかして、ファイルパスが間違っていますか…？（※仕事の開発なので、txtファイルまでは実際はもっと複雑なファイル構成なのです。。。）

m.ts10806

2019/03/12 06:16

そうですね。not foundなので。

xx_6_6_xx

2019/03/12 06:22

本当にありがとうございます。。。！もう一度パス、確認してみます！

m.ts10806

2019/03/12 06:34

後書き的な感じですが、 $(window).load()の第一引数でファイルやURL指定して中身取得できるのを今回色々やってみて初めて知りました。とりあえず動くのは動くけど、もしかしたら邪道なのかもしれません。 yambejpさんのようにajax的な組み方のほうが正攻法かもしれません。

xx_6_6_xx

2019/03/12 06:53

パスミスが原因でした…！ 1人だったらきっと一生分からなかったと思います。。。本当にありがとうございます、、、！

m.ts10806

2019/03/12 06:58

デバッグのしかたを覚えれば自己解決もできるようになるので今回のことを参考にまずは様々な角度からデバッグするようにしてみてください

行動規範の内容に同意します

ベストアンサー

javascript
1  $.get("sample.txt").done(function(data){$('div').text(data);});

もしくは

javascript
1$(function(){
2  $.ajax({
3  url:"sample.txt",
4  dataType:'text',
5  }).done(function(data){
6    $('div').text(data);
7  });
8});

エラー検証

javascript
1$(function(){
2  $.ajax({
3  url:"sample.txt",
4  dataType:'text',
5  }).done(function(data){
6    console.log(data);
7  }).fail(function(xhr,err,status){
8    console.log([err,status]);
9  });
10});