将JSON对象从Flask传递到JavaScript

我在将Flask/Python变量传递到Javascript时遇到问题

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

（43.8934276，-103.3690243），（47.052060，-91.639868），（45.1118，-95.0396）

这是在我的dict项上运行以下命令时的输出

new_list=[MySQL中d的元组（d.values（））\u Dict]
输出='，'.join（'（'+'，'.join（i）+'）表示新列表中的i）

这种方法不好，但我添加了它的细节，它的格式根本不正确

我将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);

它们都不能一起或分开工作

我还尝试使用

json\u out=json.dumps（My\u Dict）

从视图发送字典，但这也不起作用

---

这一切都是为了将lat、lng坐标从MySQL数据库中获取到GoogleMapsAPI脚本。让我非常困惑的是，如果我只是将视图中的json.dump结果粘贴到Google Maps脚本中，它就可以完美地工作（在删除引号之后），但是如果我使用变量，它就不适合我。有人有什么建议吗？

下面的简单示例应该说明如何从dict获取Javascript对象：

视图.py

@app.route('/', methods=['GET','POST'])                                         
def index():                                                                    

    points = [{"lat": 43.8934276, "lng": -103.3690243},                         
              {"lat": 47.052060, "lng": -91.639868},                            
              {"lat": 45.1118, "lng": -95.0396}]                                

    return render_template("index.html", points=json.dumps(points)) 

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()

index.html（为了简洁起见删除了一些代码）

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'），{
中心：新google.maps.LatLng（43.8934276，-103.3690243），
缩放：4
});                                                                     
var points=JSON.parse（'{points | safe}}'）；
var标记；
对于（var i=0；i

目前被接受的答案（由@BrettJ提供）似乎有一个可能的安全缺陷：如果我们传递给javascript的对象中有一些字符串，其中有一个单引号，那么这个单引号将不会被

json.dumps

转义，从而允许将任意代码注入javascript。最好使用Flask的

tojson（）

模板过滤器，请参阅，因为它可以正确转义所有此类字符（用unicode代码替换它们）

以下是我的解决方案：

view.py

@app.route('/', methods=['GET','POST'])                                         
def index():                                                                    

    points = [{"lat": 43.8934276, "lng": -103.3690243},                         
              {"lat": 47.052060, "lng": -91.639868},                            
              {"lat": 45.1118, "lng": -95.0396}]                                

    return render_template("index.html", points=json.dumps(points)) 

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()

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>

这是非常安全的。例如，如果我们使用由

json.dumps

驱动的解决方案，我们会得到

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

---

这在语法上是不正确的（至少可以这么说）。

在呈现的HTML中所需的输出是什么？谷歌地图上的标记。对不起，我的意思是你在寻找什么输出格式（坐标）？哦，对不起，它需要看起来像这样，只是一个JavaScript对象，对吗？我认为您可以通过使用JSON.parse（JSON_对象）从JSON中获得哪些内容？[{lat:43.8934276，lng:-103.3690243}，{lat:47.052060，lng:-91.639868}，{lat:45.1118，lng:-95.0396}]谢谢你的回答！好的，那么为什么会发生这种情况呢？如果我照你说的做，标记就不会出现在地图上。在谷歌地图中，我只是设置

var位置=点但是，如果我复制并粘贴您定义的点var的输出，并且直接将
var locations=[{lat:43.8934276，lng:-103.3690243}，{lat:47.05206，lng:-91.639868}，{lat:45.1118，lng:-95.0396}]
直接粘贴到地图脚本中，它就完美了！。。。我太糊涂了。我添加了一些示例Javascript，用于在地图上呈现标记。本地测试，它为我呈现标记。希望这有帮助！先生，你是上帝！非常感谢你。我这段时间最大的问题是实际的地图脚本本身。。。真令人失望。非常感谢！！此外，请注意自己和/或未来有此问题的人。我的变量中有一个下划线，JS不喜欢它。一旦我改变了这一点，情况就好多了。我从不写JS，所以我不确定这是一个规则或语法问题还是什么。无论如何，再次感谢Matt。由于缺少单引号字符的转义，此解决方案存在安全问题（可能是任意javascript代码注入）。最好使用
tojson
Flask模板过滤器。有关详细信息，请参阅我的答案。你的答案对我很有用。我改变了我的答案，更好的安全性总是意味着更好的代码。非常感谢！你为我节省了很多时间！：）这一行
JSON.parse（{{user | tojson | safe}}'）
正是我所需要的。单引号也有帮助！我很想弄清楚@Ilya V.Schurov提出的安全漏洞点（“这个引用不会被json.dumps转义，从而允许将任意代码注入javascript”）。您指出的漏洞是，json转储本身传递的未转义代码本身可以被注入javascript。是否正确？@hbrannan是的，入侵者可以将恶意javascript代码放入他们设置的字段（即注册期间的用户名、消息文本或其他内容），并且该代码可以窃取cookie/会话等。