Bagaimana untuk Menghantar Data dari Flask ke JavaScript dalam Templat?

Mengirimkan Data daripada Flask ke JavaScript dalam Templat

Dalam Flask, fungsi render_template() menghantar pembolehubah kepada paparan untuk digunakan dalam HTML. Walau bagaimanapun, bagaimanakah anda boleh menghantar data kepada JavaScript dalam templat yang sama?

Pertimbangkan contoh berikut, apabila apl Flask memanggil API yang mengembalikan kamus. Matlamatnya adalah untuk menghantar maklumat longitud dan latitud kepada JavaScript untuk digunakan dengan API Peta Google.

<code class="python">from flask import Flask, render_template

app = Flask(__name__)

@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>

Penyelesaian

Flask membolehkan anda menggunakan pembolehubah {{ }} sintaks pemegang tempat di mana-mana dalam templat, termasuk dalam kod JavaScript.

Untuk menghantar data geokod kepada JavaScript, cuma masukkannya dalam {{ }} pemegang tempat:

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

Ini akan masukkan nilai geokod[1] (longitud) ke dalam pembolehubah JavaScript someJavaScriptVar.

Untuk menghantar data sebagai tatasusunan, anda boleh menggunakan fungsi join():

<code class="html"><script>
  var myGeocode = [{{ ', '.join(geocode) }}];
</script></code>

Ini akan menjana JavaScript berikut:

<code class="javascript">var myGeocode = ['value_of_geocode[0]', 'value_of_geocode[1]'];</code>

Anda juga boleh menggunakan binaan lanjutan seperti untuk gelung dan pernyataan if dalam ruang letak {{ }}. Lihat dokumentasi Jinja2 untuk mendapatkan butiran lanjut.

Selain itu, anda boleh menggunakan penapis tojson untuk menukar objek Python kepada rentetan JSON, yang boleh digunakan terus dalam JavaScript:

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

Pendekatan ini menyediakan cara mudah untuk menghantar struktur data kompleks daripada Flask ke JavaScript dalam templat anda.

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