☰

FlaskからJavaScriptにJSONオブジェクトを渡す 質問する

tag-icon • tag-icon javascript python google-maps flask jinja2
FlaskからJavaScriptにJSONオブジェクトを渡す 質問する

Flask/Python 変数を Javascript に渡すのに問題があります。

基本的に、私は MySQL からインポートしており、戻り値を 3 つの異なる方法でレンダリングしようとしました。

  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)

この方法は良くありませんが、詳細のために追加しただけで、まったく正しい形式ではありません。

  1. 私はPythonの辞書をテンプレートに直接渡します。これは次のようになります。

({'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 スクリプトに貼り付けるだけでは完全に機能する (引用符を削除した後) のに、変数を使用すると機能しないことです。誰か提案はありますか?

ベストアンサー1

現在受け入れられている回答（@BrettJによる）には、セキュリティ上の欠陥がある可能性があるようです。JavaScriptに渡すオブジェクトに単一引用符を含む文字列が含まれている場合、この単一引用符は によってエスケープされず、JavaScriptに任意のコードを挿入できるようになります。Flaskのテンプレートフィルターjson.dumpsを使用することをお勧めします。tojson()ドキュメント、このような文字はすべて適切にエスケープされます（Unicode コードに置き換えられます）。

これが私の解決策です:

ビュー.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 solutionを使用すると、

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

これは文法的に間違っています（控えめに言っても）。

おすすめ記事