将 JSON 对象从 Flask 传递到 JavaScript

Question

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

这些都不起作用，一起或单独。

1. 我还尝试使用json_out = json.dumps(My_Dict) 从视图中发送字典，但这也不起作用。

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

Answer 1

目前接受的答案（@BrettJ）似乎存在一个可能的安全漏洞：如果我们传递给 javascript 的对象有一些内部带有单引号的字符串，则该单引号不会被 json.dumps 转义，从而允许将任意代码注入 javascript。最好使用 Flask 的 tojson() 模板过滤器，请参阅 the docs，因为它可以正确转义所有此类字符（将它们替换为 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()

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>

生成的 JS 看起来像：

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

这是绝对安全的。例如，如果我们使用json.dumps-powered 解决方案，我们会得到 ​​p>

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

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

Answer 2

下面的简单示例应该显示如何从您的 dict 中获取 Javascript 对象：

views.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)) 

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

  function initMap() {                                                      

    var map = new google.maps.Map(document.getElementById('map'), {         
      center: new google.maps.LatLng(43.8934276, -103.3690243),             
      zoom: 4                                                               
    });                                                                     

    var points = JSON.parse('{{ points|safe }}');                           
    var marker;                                                             

    for (var i = 0; i < points.length; i++) {                               

        marker = new google.maps.Marker({                                   
          position: new google.maps.LatLng(points[i].lat, points[i].lng),   
          map: map                                                          
        });                                                                 

    }                                                                       
  }