Javascript 访问烧瓶应用程序中的本地 JSON 文件答案

【问题标题】：Javascript accessing local JSON files in flask appJavascript 访问烧瓶应用程序中的本地 JSON 文件
【发布时间】：2020-06-16 04:09:15
【问题描述】：

我在本地运行一个烧瓶应用程序，我的目标是将字典从 python 传递到 Javascript。我目前能够将字典作为 json 文件存储在本地文件夹中，但是我的 ajax 请求似乎无法访问本地 json。为什么这不起作用，是否有一个烧瓶模块允许我在本地将 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

错误消息：GET http://localhost:5000/data.json 404（未找到）

【问题讨论】：

data.json 不是静态服务的，只能看到一个路由，pos dupe of stackoverflow.com/questions/20646822/…
顺便说一句，这不是 cors 问题

标签： javascript json flask flask-restful

【解决方案1】：

已解决：

# 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 文件夹中以使其正常工作

【讨论】：

【解决方案2】：

您是否尝试在 HTML 文件中呈现您的 Python 字典？你应该考虑使用 Jinja。

如果您在响应中添加字典，它将作为 JSON 被您的 html 页面接收，as of flask 1.1。

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


@app.route('/')
def index():
    jsonn = dictionary_a
    return render_template('home.html', jsonn=jsonn)

然后您可以使用Jinja 在您的html 页面中处理它。

你可以遍历它的元素，添加 if 语句，等等...

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

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

如果需要，您也可以将其直接传递给您的 javascript 代码并像 json 一样处理它

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

【讨论】：

感谢您的回复，我试图将其传递给 javascript，因为该字典可能会变得非常大，并且目前用作哈希图。所以我只想在 html 上显示一小部分，以便在用户输入输入时动态更新表单。但是将其传递给模板并直接传递给 javascript 似乎也是一种很有前途的方法。