Bagaimanakah saya boleh menghantar data daripada aplikasi Flask kepada JavaScript dalam templat paparan saya untuk digunakan dalam perpustakaan JavaScript seperti API Peta Google?-tutorial js-php.cn

Bagaimanakah saya boleh menghantar data daripada aplikasi Flask kepada JavaScript dalam templat paparan saya untuk digunakan dalam perpustakaan JavaScript seperti API Peta Google?

Susan Sarandon

Lepaskan： 2024-10-27 08:07:30

asal

221 orang telah melayarinya

How can I pass data from a Flask application to JavaScript in my view template for use in JavaScript libraries like Google Maps API?

Mengirim Data dari Flask ke JavaScript dalam Templat

Apabila bekerja dengan aplikasi Flask, anda mungkin menghadapi situasi di mana anda perlu menghantar data daripada kamus Python ke JavaScript dalam templat paparan anda. Data ini boleh digunakan dalam perpustakaan JavaScript, seperti API Peta Google. Artikel ini akan membimbing anda melalui proses menghantar data daripada Flask ke JavaScript dengan berkesan.

Untuk menghantar pembolehubah ini kepada JavaScript, anda boleh menggunakan fungsi render_template Flask. Jinja2, enjin templat Flask, membenarkan anda mengakses pembolehubah data dengan sintaks {{ pembolehubah }}. Ini bermakna anda boleh menghantar data kamus Python anda kepada skrip JavaScript dengan hanya menggunakan {{ pembolehubah }} di tempat yang sesuai dalam templat anda.

Sebagai contoh, mari pertimbangkan contoh berikut:

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

app = Flask(__name__)

@app.route('/')
def get_data():
    events = {'latitude': 40.7128, 'longitude': -74.0059}
    geocode = events['latitude'], events['longitude']
    return render_template('get_data.html', geocode=geocode)</code>

Salin selepas log masuk

Dalam contoh ini, kami mempunyai kamus Python yang dipanggil 'peristiwa' yang mengandungi maklumat latitud dan longitud. Kami mengekstrak data ini ke dalam tuple yang dipanggil 'geocode'. Fungsi render_template membolehkan kami menghantar pembolehubah 'geocode' ke templat 'get_data.html'.

Kini, dalam templat HTML anda, anda boleh mengakses data menggunakan sintaks Jinja2. Begini cara anda boleh memasukkannya ke dalam skrip JavaScript:

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

Salin selepas log masuk

Kod ini akan memberikan nilai longitud kepada pembolehubah geokod dalam JavaScript.

Sebagai alternatif, anda boleh mewakili 'geocode' sebagai tatasusunan dalam JavaScript dengan menjana definisi tatasusunan dalam output templat anda:

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

Salin selepas log masuk

Pendekatan ini mencipta tatasusunan yang boleh diakses dan dimanipulasi dengan mudah oleh logik JavaScript anda.

Jinja2 menawarkan set komprehensif daripada binaan yang membolehkan anda memanipulasi dan menyesuaikan output anda. Sebagai contoh, anda boleh memendekkan contoh sebelumnya menggunakan gelung for:

<code class="html"><head>
  <script>
    var myGeocode = [{% for value in geocode %}{{ value }}, {% endfor %}];
  </script>
</head></code>

Salin selepas log masuk

Penapis tojson Jinja2 juga boleh digunakan untuk menukar objek Python kepada rentetan Notasi Objek JavaScript (JSON).

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

Salin selepas log masuk

Dengan menggunakan teknik ini, anda boleh menghantar data daripada Flask ke JavaScript dengan berkesan, membolehkan komunikasi lancar antara komponen Python dan JavaScript anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menghantar data daripada aplikasi Flask kepada JavaScript dalam templat paparan saya untuk digunakan dalam perpustakaan JavaScript seperti API Peta Google?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!