ajaxでjsonを読み込もうとすると404 Not found Error が出てしまう

###問題
ajaxを使ってjsonファイルを読み込もうとしているのですが、404errorと出てしまいます。
###ファイル群
ファイル構造は次のようになってます。

JSlaboratory
    app.py
    templates
        index.html
    static
        index.js
        data.json

app.pyの中身はこれです

python
1#!/usr/bin/env python
2# -*- coding: utf-8 -*-
3
4from flask import Flask, render_template
5
6app = Flask(__name__)
7
8@app.route('/')
9def index():
10    return render_template('index.html')
11
12if __name__ == '__main__':
13    app.run()

index.htmlの中身はこれです

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <title>experience</title>
6    </head>
7    <body>
8        <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
9        <script src="../static/index.js"></script>
10    </body>
11</html>

index.jsの中身はこれです

javascript
1let A;
2$.ajax({url: 'data.json', dataType: 'json'})
3.done(function(data) {
4    $(data).each(function(){
5        A = this.id;
6    })
7})
8.fail(function(){
9    window.alert('error');
10});
11console.log(A);

data.jsonの中身はこれです

json
1[
2    {"id":"js","crowded":"yes"}
3]

結果はerrorとアラートがでて、コンソールを見るとundefinedと404 not foundが出ています。

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

回答4件

ベストアンサー

$.ajax の url の指定が間違っていて、サーバー側で data.json が見つからないのが 404 エラーの原因で、結果 A が undefined になっているのではないかと思います。

試しに、data.json ファイルを index.html ファイルがあるフォルダにコピーしたらどうなりますか？

【追記】

注：以下は普通の web サーバー（具体的には Windows 10 Pro の IIS10）を使って、それにサイトを設定し、その中に index.html, data.json, index.js を配置した場合です。質問者さんは Flask を使ってその開発サーバーで実行しているとのことで、Flask 開発サーバーの制約で data.json, index.js を置くフォルダは static にする必要があるとのことです。（下の記事のように index.html, data.json を同一フォルダに置くのは NG のようです）

下の 2019/10/10 23:28 の私のコメントで「あとで回答欄に詳しい話を書いておきます」と書きましたが、それを以下に追記します。

templates フォルダの中に index.html と data.json を配置します。index.js は Script フォルダに入れておきます。以下の画像を見てください。

index.html は jQuery ajax で取得した JSON データを表示するために<div id="result"></div>を追加した以外は質問者さんのコードと同じです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>experience</title>
</head>
<body>
    <div id="result"></div>

    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="../Scripts/index.js"></script>    
</body>
</html>

質問者さんの index.js のコードは、上の index.html の<div id="result"></div>に JSON データを表示できるように done のコールバックを以下のように変更しました。 url: 'data.json' は変えてません。

index.js

$.ajax({ url: 'data.json', dataType: 'json' })
.done(function (data) {
    $.each(data, function (index, d) {
        $('#result').append(
            '<p>id: ' + d.id + ', crowded: ' + d.crowded + '</p>'
            );
    });
})
.fail(function () {
    window.alert('error');
});

index.html の実行結果は以下の通りとなり、期待通り JSON データが表示されます。もちろん 404 エラーなどは出ません。

投稿2019/10/10 00:09

編集2019/10/11 00:43

退会済みユーザー

総合スコア0

suzunox

2019/10/10 15:15

僕がやってみた結果、やはりエラーが生じてしまいます。その原因として、やはりflaskでやっているからだと思います。まず、app.pyが存在するディレクトリの、正常に作動するルールとして、jsやcssは必ずstaticファイルの中に置くという決まりがあります。そして、htmlはtemplatesファイルのなかだということが決まっています。flaskのチュートリアルに書いてあるので読んでみてください。

退会済みユーザー

2019/10/10 16:00

ブラウザのアドレスバーに index.html の url を入力して呼び出しましたか？　今回の対象は html, js, json ファイルだけなので、Web サーバーだけで処理はでき、期待した応答が返ってくるはずですが？ Web サーバーの代わりに Python とか Flask とかが介在しているとするとどうなるかは自分は分かりませんが。

suzunox

2019/10/10 23:21

僕は今高専2年生なんで、pythonの課題があったわけですよ。呼び出し方はapp.pyを起動するだけです。

suzunox

2019/10/10 23:25

でも、質問の仕方が悪かったのかなと思います。flaskを強調すればよかったのだと思います。迷惑をおかけしてすみませんでした。

退会済みユーザー

2019/10/11 00:02

自分は Flask は無知だったのでググって調べてみましたが、開発サーバーが実装されているようですね。コマンドで python app.py というように実行すると、開発サーバーが立ち上がって、http://localhost:5000/ でブラウザからの要求を受け付けるようになる。ブラウザから上記 url を要求すると、開発サーバーで質問者さんのコードの index() が実行され、index.html がブラウザに応答として返される。・・・という仕組みになっているようです。開発サーバーの制約で、index.html が取り込む .js, .json ファイルは static フォルダに置いて、url を /static/data.json というようにサイトルート相対パスで指定する必要があったということと理解しました。理解が間違っていたらご指摘ください。

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

解決方法:
urlはapp.pyからの相対パスにする(Flaskを使っていたため)。url: static/data.json

投稿2019/10/10 10:35

編集2019/10/10 12:53

suzunox

総合スコア80

退会済みユーザー

2019/10/10 12:21 編集

原因はパスが間違っていただけだったのではないのですか？　（「urlはapp.pyからの相対パスだということ」のが意味不明ですが、要するに url の設定が間違っていたはず）　1 は何も関係ないと思いますが、それが原因だったということなら、その理由を詳しく書いてください。

suzunox

2019/10/10 12:51

すいません、試してみたらその属性はなくても正常に動作しました。上の回答はすぐに編集しなおします。

退会済みユーザー

2019/10/10 13:05

> urlはapp.pyからの相対パスにする(Flaskを使っていたため)。書き直したようですが、上記も違うと思いますよ。index.html から $.ajax({url: 'data.json', ... としたとき、data.json はどこになければならないかよく考えれみてください。ホントにごくごく基本的なパスの問題です。

suzunox

2019/10/10 13:15

templatesの中にdata.jsonを置いても404エラーが出てしまい、一つ上のディレクトリにおいても404エラーが出てしまいます。どこに置けばいいのでしょうか。

退会済みユーザー

2019/10/10 14:28

> templatesの中にdata.jsonを置いても404エラーが出てしまい templates フォルダの中に index.hhml と data.json はあれば、質問者さんのスクリプトが動くかどうかはともかく、少なくとも 404 エラーにはならないはず。やり方の問題だと思います。あとで回答欄に詳しい話を書いておきます。

suzunox

2019/10/10 14:30

すいません、何度もありがとうございます。

退会済みユーザー

2019/10/11 01:14

> urlはapp.pyからの相対パスにする(Flaskを使っていたため)。url: static/data.json 「app.pyからの相対パス」と言うより、今回の質問者さんのコードでは「サイトルートからの相対パス」と言った方が当たっているのではないでしょうか？コマンドで python app.py というように実行すると、 Flask 開発サーバーが立ち上がって、app.py のコードの @app.route('/') に従って http://localhost:5000/ でブラウザからの要求を受け付けるようになり、開発サーバーが返す index.html はサイトルートにあるということになるはずです。なので、$.ajax に指定する url は /static/data.json というように static の前に / を入れてサイトルート相対パスと明示した方がよさそうな気がします。（結果は url: static/data.json でも同じでしょうけど）あと、index.html のコードの <script src="../static/index.js"></script> の src 属性も "/static/index.js" とした方がよさそうに思います。

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

JavaScript のカレントパスは、読み込まれている HTML が基準になります。
なので、../static/data.jsonなどになるのではないですか？

投稿2019/10/10 00:24