Javascript访问flask应用程序中的本地JSON文件_Javascript_Json_Flask_Flask Restful

Javascript访问flask应用程序中的本地JSON文件

javascript json flask

Javascript访问flask应用程序中的本地JSON文件,javascript,json,flask,flask-restful,Javascript,Json,Flask,Flask Restful,我正在本地运行一个flask应用程序，我的目标是将一个字典从python传递到Javascript。我目前可以将字典作为json文件存储在本地文件夹中，但是我的ajax请求似乎无法访问本地json。为什么这不起作用，是否有一个flask模块允许我在本地将python字典传递给javascript # app.py dictionary_a = { "a": { "b": { "function_handler": c, "d

我正在本地运行一个flask应用程序，我的目标是将一个字典从python传递到Javascript。我目前可以将字典作为json文件存储在本地文件夹中，但是我的ajax请求似乎无法访问本地json。为什么这不起作用，是否有一个flask模块允许我在本地将python字典传递给javascript

# app.py
dictionary_a = {
    "a": {
        "b": {
            "function_handler": c,
            "defaults": {'d':e, 'f':g},
        },
        "h": {
            "function_handler": i,
            "defaults": {'d':l},
        },
    },
}

def dumper(obj):
    try:
        return obj.toJSON()
    except:
        return obj.__dict__


@app.route('/')
def index():
    jsonn = json.dumps(dictionary_a, default=dumper, indent=2)
    with open('data.json', 'w') as json_file:
        json.dump(jsonn, json_file)
    return render_template('home.html')

这是我的python代码

# code.js
$.getJSON("../../data.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

这是javascript中的代码

文件夹结构是

>project
  -app.py
  >static
    >js
      -code.js
  -data.json

错误消息：获取404（未找到）

已解决：

# code.js
var script = document.currentScript;
var fullUrl = script.src;

这些行允许获取code.js的路径

var jsonUrl = fullUrl.replace("code.js", "data.json") // hard coded jsonUrl

$.getJSON(jsonUrl, function(from_to_conversions) {
    console.log(from_to_conversions)
});

我已将json文件转储到static/js文件夹中，以便工作

您是否正在尝试将python字典呈现在HTML文件中？你应该考虑使用金卡。< /P> 如果您在响应中添加了一个字典，它将作为JSON被您的html页面接收

然后，您可以使用在html页面中处理它

您可以循环它的元素，添加if语句，等等

您的home.html应该如下所示：

<html>
...
    <body>
    ...
    {{jsonn}}
    ...
    </body>
...
</html>


...
...
{{jsonn}}
...
...

您还可以将其直接传递给javascript代码，并在需要时像json一样处理它

<script>
const jsonn = `{{jsonn | safe}}`
</script>


const jsonn=`{jsonn|safe}`

data.json不是静态提供的，只能看到一条路线，顺便说一句，它不是一个cors ISSUETHAN。谢谢你的回答，我试图将它传递到javascript中，因为这个字典可能会变得非常大，目前像hashmap一样使用。所以我只想在html上显示一小部分，以便在用户输入时动态更新表单。但将其传递到模板并直接传递给javascript似乎也是一种很有前途的方法。

<script>
const jsonn = `{{jsonn | safe}}`
</script>