将一个JSON对象从Flask传递给JavaScript

Bre*_*ttJ 12 javascript python google-maps jinja2 flask

我很难将Flask/Python变量传递给Javascript.

基本上,我是从MySQL导入并尝试以三种不同的方式呈现返回.

  1. (43.8934276, -103.3690243), (47.052060, -91.639868), (45.1118, -95.0396) 这是当我的dict项目运行了以下时的输出.

new_list = [tuple(d.values()) for d in MySQL_Dict] output = ', '.join('(' + ', '.join(i) + ')' for i in new_list)

这种方法并不好,但我为了细节添加了它,它根本不是正确的格式.

  1. 我将python dict直接传递给看起来像这样的模板

({'lat': '43.8934276', 'lng': '-103.3690243'}, {'lat': '47.052060', 'lng': '-91.639868'}, {'lat': '45.1118', 'lng': '-95.0396'})

然后在模板方面我尝试了以下JavaScript行

 var other_coords = {{ MySQL_Dict|tojson }}; 
 var other_coords = {{ MySQL_Dict|tojson|safe }};
 var still_more = JSON.parse(other_coords);
Run Code Online (Sandbox Code Playgroud)

这些都不能共同工作或分开工作.

  1. 我也试过从视图中发送字典json_out = json.dumps(My_Dict),但也不起作用.

这一切都是为了将​​lat,lng coords从MySQL DB转换为Google Maps API脚本.让我感到困惑的是,如果我只是将视图中的json.dump结果粘贴到Google Maps脚本中,它就可以完美地工作(删除引号后)但是如果我使用变量则不适用于我.有没有人有建议?

Ily*_*rov 25

似乎当前接受的答案(由@BrettJ)有一个可能的安全漏洞:如果我们传递给javascript的对象有一些带有单引号的字符串,这个单引号将不会被转义json.dumps,从而允许任意注入代码转换为javascript.最好使用Flask的tojson()模板过滤器,查看文档,因为它可以正确地转义所有这些字符(用unicode代码替换它们).

这是我的解决方案:

view.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    user = {'firstname': "Mr.", 'lastname': "My Father's Son"}
    return render_template("index.html", user=user)

if __name__ == '__main__':
    app.run()
Run Code Online (Sandbox Code Playgroud)

的index.html

<p>Hello, <span id="username"></span></p>
<script>
    var user = JSON.parse('{{ user | tojson | safe}}');
    document.getElementById('username').innerHTML = user.firstname + " " +
            user.lastname;
</script>
Run Code Online (Sandbox Code Playgroud)

生成的JS看起来像:

var user = JSON.parse('{"firstname": "Mr.", "lastname": "My Father\u0027s Son"}');
Run Code Online (Sandbox Code Playgroud)

这是非常安全的.例如,如果我们使用json.dumps-powered解决方案,我们就会得到

var user = JSON.parse('{"firstname": "Mr.", "lastname": "My Father's Son"}');
Run Code Online (Sandbox Code Playgroud)

这在语法上是不正确的(至少可以说).

  • 您的回答对我有用。我更改了接受的答案,更好的安全性总是等于更好的代码。 (2认同)