將JSON對象從Flask傳遞到JavaScript

Question

我遇到了將Flask/Python變量傳遞給Javascript的麻煩。

基本上，我從MySQL導入並嘗試以三種不同的方式渲染返回。

1. (43.8934276, -103.3690243), (47.052060, -91.639868), (45.1118, -95.0396)即輸出時，我的字典項上有以下跑去。

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

這種方法是不行的，但我加了它的細節，這是不正確的格式在所有。

我直接傳遞蟒字典到看起來像這樣

({'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)這個視圖發送字典，這也不起作用。

這樣做的目的都是爲了從MySQL DB到Google Maps API腳本獲取經緯度座標。對我來說如此令人困惑的事情是，如果我只是將視圖中的json.dump結果粘貼到Google Maps腳本中，那麼它完美地工作（刪除引號後），但如果我使用變量，它將不適用於我。有沒有人有建議？

Answer 1

看來，目前接受的答案（by @BrettJ）有可能le安全漏洞：如果我們傳遞給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() 

指數。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的解決方案，我們會得到

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

這是語法不正確（至少可以這樣說）。

Answer 2

下面簡單的例子應該展示如何從你的字典得到一個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               
     });                 

    }                  
    }