Bagaimana untuk Menghantar Data dari Flask ke JavaScript dalam Templat Menggunakan Jinja2?

Mengirim Data dari Flask ke JavaScript dalam Templat

Apabila mengambil data daripada API dalam aplikasi Flask, mungkin terdapat keperluan untuk lulus maklumat itu kepada JavaScript dalam templat yang sepadan. Artikel ini meneroka cara untuk mencapai perkara ini dengan memanfaatkan kuasa templat Jinja2.

Dalam Flask, fungsi render_template membolehkan kami menghantar pembolehubah kepada templat HTML. Walau bagaimanapun, untuk menjadikan pembolehubah ini tersedia dalam JavaScript, langkah tambahan diperlukan.

Jinja2, enjin templat yang digunakan oleh Flask, menyediakan sintaks yang membolehkan pembenaman ungkapan Python dalam templat. Ini bermakna kita boleh menggunakan {{ pembolehubah }} di mana-mana dalam templat, termasuk dalam skrip JavaScript.

Sebagai contoh, pertimbangkan laluan Flask berikut yang mendapatkan koordinat daripada API:

<code class="python">@app.route('/')
def get_data():
    events = api.call(get_event, arg0, arg1)
    geocode = event['latitude'], event['longitude']
    return render_template('get_data.html', geocode=geocode)</code>

Dalam templat yang sepadan, kami boleh menghantar pembolehubah geokod kepada JavaScript seperti:

<code class="html"><script>
var someJavaScriptVar = '{{ geocode[1] }}';
</script></code>

Ini membolehkan kami mengakses nilai geokod[1] sebagai someJavaScriptVar dalam kod JavaScript kami.

Sebagai alternatif, untuk menghantar pembolehubah geokod sebagai tatasusunan, kita boleh menjana definisi tatasusunan dalam templat:

<code class="html"><script>
var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
</script></code>

Jinja2 juga menyokong binaan yang lebih maju, seperti gelung dan pernyataan if, yang boleh digunakan untuk memudahkan penjanaan struktur data yang kompleks.

Selain itu, penapis tojson boleh digunakan untuk menukar tuple geokod kepada rentetan JSON, menjadikannya lebih sesuai untuk digunakan dalam JavaScript:

<code class="html"><script>
var myGeocode = {{ geocode | tojson }};
</script></code>

Dengan teknik ini, pembangun boleh berkongsi data dengan lancar antara Flask dan JavaScript, membolehkan aplikasi web interaktif dan dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data dari Flask ke JavaScript dalam Templat Menggunakan Jinja2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!