jQueryで外部テキストファイルを読み込みたいと思っています。
https://ghweb.info/post-2976.htmlを参考にしてやってみたのですが、どうもうまくいきません。
上記参考サイトのサンプル1は読み込めます。
------------------ サンプル1 --------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQueryでテキストファイルを表示する</title>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#read_text").load("sample_txt.txt");
});
</script>
</head>
<body>
<h3>.load()でテキストファイルを読込み</h3>
<div id="read_text"></div>
</body>
</html>
しかし、$.getで読み込むサンプル2がどうしても読み込めません。
------------------ サンプル2 --------------------
<script>
$(function() {
$.get("sample_txt.txt", function(data){
$("#read_text").text(data);
});
});
</script>
これで半日ほどハマっています。何か根本的に間違っているんでしょうか?
OSはLinux mint、ブラウザはfirefoxです。
No.2ベストアンサー
- 回答日時:
ANo1です。
私の環境(windows)でも、サーバでは当然ながら問題はありませんが、ローカルでは、IEはOSがアクセスを拒否、fxでは.load()は実行できますが、$.get()では処理でないという、似たような事象が発生しました。
$.get()の場合、fxではsuccessが返されましたが、何も表示されないので、さらに調べてみると、dataTypeを自動設定にしておくとXMLと解釈されているようで、テキストは空文字列になっているみたいでした。
(OSからどのようなヘッダが返されているのかなどはわかりません)
質問者様の環境ではparsererrorとのことですので、statusこそ異なりますが、同様の事象が起きているではないかと想像します。
.load()では、内部処理で(想像ですが)dataTypeをhtmlかtextに決め打ちしているのではないかと思い、(ANo1でも回答しましたように)textを明示的に指定してみたところ、$.get()でも、$.ajax()でも表示することができるようになりました。
質問者様の環境では、この方法でもうまくいきませんか?
とはいうものの、ローカルでのアクセスは、実行できたとしても正しいアクセスとは言えないでしょうから、どのような環境でも同じ結果になるなどという保証はないと思いますが。
(専門家ではなく、全くの門外漢ですので理屈や仕組みはさっぱりわかってません。(汗)
ご回答ありがとうございます。
おっしゃる通りでした。
「dataType: 'text',」を追加するだけできちんと読み込まれました。最初のご回答の「dataType: 'text',」の意味を全く理解できなかったのでスルーしてしまいました。
それにしてもこれまで「dataType: 'text',」にお目にかからなかったことが不思議です。jQuery に関しては今まで必要に応じてかなりネット検索してきたつもりですが、この「dataType: 'text',」は一度も目にしたことはないと思います。
とにかく、fujillin さんの素早く的確なアドバイスで、ハマっていた課題があっという間に解決しました。質問して良かったと心から感謝しております。どうもありがとうございました。
No.1
- 回答日時:
こんにちは
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を動かしています。そこでサーバー環境でやってみたところちゃんと動きました。jQuery関してはいろいろとプログラムを作ってだいたいわかったつもりでいましたが、とんでもない勘違いをしていたようです。
ただ、私はローカル環境でjQueryでテキストファイルを読み込みたいのです。
現在、モーダルウィンドウを使ってコメント入りのアルバムを作っているのですが、jQueryを使って外部ファイルを読み込んでHTMLタグを動的に作成したいと考えています。MySQLとPHPではできているのですが、それだと例えばCDRに焼いたりして配布・閲覧ができません。
私は外部ファイルにいろいろ記録しておいて、その内容をjQueryに読ませたいと思っているのですが何かいいアイデアはないでしょうか?
なお提示されたajaxのコードを実行すると、サーバー環境では「status = success」ですが、ローカルでは「status = parsererror」となります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavascriptからPHPへのAjax通信...
-
jQuery3 reset()が効かない。
-
jQueryのblockUIをformのボタン...
-
ajaxでPHPにPOST送信して結果デ...
-
AjaxでJSONを受信すると、文字...
-
jQuery を外部ファイルから呼び...
-
Javascriptを使ってQRコード読...
-
[jQuery UI] sortableを使いaja...
-
テーブルの形式を整えるJavascript
-
FullCalendar の複数月表示につ...
-
スクリプトの外部からの読み込み
-
変数にドットをいれることはか...
-
アコーディオンメニューが他に...
-
WebbrowserよりHTMLのValue値を...
-
別ページのインラインフレーム...
-
【お問い合わせフォーム】プル...
-
要素内を常に一番下を表示させたい
-
jqueryで読み込みが終わった画...
-
Selenium4でボタンをクリックで...
-
メールを送信するボタンでOutlo...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavascriptからPHPへのAjax通信...
-
jQueryを使いformでsubmitした...
-
jQueryのblockUIをformのボタン...
-
AjaxでJSONを受信すると、文字...
-
jQuery3 reset()が効かない。
-
Ajax サーバーに負荷かかります...
-
eval、$.eachで順番が入れ替わ...
-
ajaxからphpにpsotしたときの日...
-
jQuery を外部ファイルから呼び...
-
ajaxでPHPにPOST送信して結果デ...
-
JQueryの変数の扱いで弱ってい...
-
jQuery,Ajaxでcgiに接続する方...
-
Ajax・jQueryでGET時にIE...
-
ajax + PHPによるエラーの返し...
-
jquery × php × mysql 非同期で...
-
Ajaxでフォームデータを連続登...
-
Ajax・jQueryでGETとPOSTする方法
-
ajax&php post 一部更新
-
Selenium4でボタンをクリックで...
-
Javascriptを使ってQRコード読...
おすすめ情報