jQueryで外部テキストファイルを読み込みたいがうまくいきません

Question

jQueryで外部テキストファイルを読み込みたいと思っています。 https://ghweb.info/post-2976.htmlを参考にしてやってみたのですが、どうもうまくいきません。上記参考サイトのサンプル1は読み込めます。 ------------------　サンプル1　-------------------- jQueryでテキストファイルを表示する

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

しかし、$.getで読み込むサンプル2がどうしても読み込めません。 ------------------　サンプル2　-------------------- これで半日ほどハマっています。何か根本的に間違っているんでしょうか？ OSはLinux mint、ブラウザはfirefoxです。

fujillin · Accepted Answer

ANo1です。

私の環境（windows）でも、サーバでは当然ながら問題はありませんが、ローカルでは、IEはOSがアクセスを拒否、fxでは.load()は実行できますが、$.get()では処理でないという、似たような事象が発生しました。

$.get()の場合、fxではsuccessが返されましたが、何も表示されないので、さらに調べてみると、dataTypeを自動設定にしておくとXMLと解釈されているようで、テキストは空文字列になっているみたいでした。
（ＯＳからどのようなヘッダが返されているのかなどはわかりません）

質問者様の環境ではparsererrorとのことですので、statusこそ異なりますが、同様の事象が起きているではないかと想像します。
.load()では、内部処理で（想像ですが）dataTypeをhtmlかtextに決め打ちしているのではないかと思い、（ANo1でも回答しましたように）textを明示的に指定してみたところ、$.get()でも、$.ajax（）でも表示することができるようになりました。
質問者様の環境では、この方法でもうまくいきませんか？

とはいうものの、ローカルでのアクセスは、実行できたとしても正しいアクセスとは言えないでしょうから、どのような環境でも同じ結果になるなどという保証はないと思いますが。
（専門家ではなく、全くの門外漢ですので理屈や仕組みはさっぱりわかってません。（汗）

fujillin · Answer

こんにちは

Linuxについてはまったく存じませんが・・・

$("#read_text").load("sample_txt.txt");　と
　$.get("sample_txt.txt", function(data){
　　$("#read_text").text(data);
はほとんど同じ内容なので、jQueryの内部でもほぼ同様のルートで処理を行っているものと想像します。
jQueryのドキュメントによると、.load()では送信データを指定しなければメソッドはGETとなるような記述がありますので、ここで違いが生じているわけでもなさそうです。
http://api.jquery.com/load/

ところで、テストデータはサーバにアップして行っていますか？
ローカル環境ではOSによってはアクセスができなかったり、うまく動作しない場合も考えられます。
まぁ、.load()で読めているとのことですので、単純にそういうことでもないのかも知れませんが…

そのうえで、動作しないのであるなら、
＞どうしても読み込めません。
だけでは、どうなっているのかわからないので、何が起こっているのか調べてみる必要があります。
ドキュメントには、$.getは以下と等価と書かれています。
http://api.jquery.com/jQuery.get/

$.ajax({
　　url: url,
　　data: data,
　　success: success,
　　dataType: dataType
　});
$.ajaxは自由度が高いプリミティブなメソッドですので、こちらを利用して調べてみるのが良さそうです。
（特に、エラーが発生した場合の処理なども指定できるので）
http://api.jquery.com/jQuery.ajax/

例えば、
　$(function() {
　　$.ajax({
　　　url: "sample_txt.txt",
　　　success: function(data){ $("#read_text").text(data); } ,
　　　complete: function(jqXHR, status){ console.log( "status = " +  status ); }
　　});
　});
とすることで、実行時のステータスが調べられます。
何らかのエラーが発生していれば、statusにerrorが返されるはずです。
エラーの場合は、error時の関数などを利用してさらに詳細を調べることが可能です。

私の勝手な想像では、質問者様はローカル環境でテストなさっていて、上記をテストするとsuccessが返されるのではないかと思いますが・・？
そのような場合は、dataTYpeを"text"と明示して実行してみてください。
まったくの想像での回答ですけれど、多分、これで解決する可能性が高いのではないかと思います。

jQueryで外部テキストファイルを読み込みたいがうまくいきません

ANo1です。

こんにちは

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング