>백엔드 개발 >파이썬 튜토리얼 >Google Maps API용 템플릿에서 Flask의 데이터를 JavaScript로 전달하는 방법은 무엇입니까?

Google Maps API용 템플릿에서 Flask의 데이터를 JavaScript로 전달하는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-02 01:31:03274검색

How to Pass Data from Flask to JavaScript in Templates for Google Maps API?

Flask에서 템플릿의 JavaScript로 데이터 전달

개요

Flask 애플리케이션에서는 Python 사전의 정보를 템플릿의 JavaScript로 전달해야 합니다. 특히 Google Maps API용.

솔루션

Flask의 Render_template은 HTML 렌더링을 위해 템플릿에 변수를 전달하는 메커니즘을 제공합니다. 이 기능을 JavaScript로 확장하려면 Jinja 템플릿 엔진을 활용할 수 있습니다. 방법은 다음과 같습니다.

  1. 어디서나 변수 통합: Jinja 변수는 JavaScript 부분을 포함하여 템플릿 전체에서 사용할 수 있습니다.
  2. 직접 할당: {{ 변수 }}를 사용하여 JavaScript 변수를 직접 할당합니다. 예를 들어 JavaScript 변수에 경도를 할당할 수 있습니다:
<code class="javascript"><script>
  var longitude = '{{ geocode[1] }}';
</script></code>
  1. 배열 정의 생성: 배열을 JavaScript에 전달하려면 생성하세요. 템플릿에서 배열 정의로 사용:
<code class="html">  <script>
    var geocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
  </script></code>
  1. Jinja 구문 활용: Jinja는 더욱 고급 구문을 제공합니다. 예를 들어 조인 필터를 사용하여 배열 정의를 단축할 수 있습니다.
<code class="html"><script>
  var geocode = [{{ ', '.join(geocode) }}];
</script></code>
  1. tojson 필터 고려: 더 복잡한 데이터 구조의 경우 tojson 필터를 사용하여 JavaScript 사용을 위해 사전과 목록을 JSON 문자열로 변환:
<code class="html">  <script>
    var geocode = {{ geocode | tojson }};
  </script></code>

위 내용은 Google Maps API용 템플릿에서 Flask의 데이터를 JavaScript로 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.