Google Maps API와 같은 JavaScript 라이브러리에서 사용하기 위해 내 뷰 템플릿에서 Flask 애플리케이션의 데이터를 JavaScript로 전달하려면 어떻게 해야 합니까?-JS 튜토리얼-php.cn

Google Maps API와 같은 JavaScript 라이브러리에서 사용하기 위해 내 뷰 템플릿에서 Flask 애플리케이션의 데이터를 JavaScript로 전달하려면 어떻게 해야 합니까?

Susan Sarandon

풀어 주다： 2024-10-27 08:07:30

원래의

218명이 탐색했습니다.

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

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

Flask 애플리케이션으로 작업할 때 Flask 애플리케이션에서 데이터를 전달해야 하는 상황에 직면할 수 있습니다. 뷰 템플릿의 JavaScript에 대한 Python 사전입니다. 이 데이터는 Google Maps API와 같은 JavaScript 라이브러리에서 활용될 수 있습니다. 이 글은 Flask에서 JavaScript로 데이터를 효과적으로 전달하는 과정을 안내합니다.

이러한 변수를 JavaScript로 전달하려면 Flask의 render_template 기능을 활용할 수 있습니다. Flask의 템플릿 엔진인 Jinja2를 사용하면 {{variable }} 구문을 사용하여 데이터 변수에 액세스할 수 있습니다. 즉, 템플릿 내의 적절한 위치에 {{ 변수 }}를 사용하기만 하면 Python 사전 데이터를 JavaScript 스크립트에 전달할 수 있습니다.

예를 들어 다음 예를 고려해 보겠습니다.

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

로그인 후 복사

이 예에는 위도와 경도 정보가 포함된 'events'라는 Python 사전이 있습니다. 우리는 이 데이터를 'geocode'라는 튜플로 추출합니다. render_template 함수를 사용하면 'geocode' 변수를 'get_data.html' 템플릿에 전달할 수 있습니다.

이제 HTML 템플릿 내에서 Jinja2의 구문을 사용하여 데이터에 액세스할 수 있습니다. 이를 JavaScript 스크립트에 통합하는 방법은 다음과 같습니다.

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

로그인 후 복사

이 코드는 JavaScript의 지오코드 변수에 경도 값을 할당합니다.

또는 'geocode'를 템플릿 출력에서 배열 정의를 생성하여 JavaScript 내에서 배열을 생성합니다.

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

로그인 후 복사

이 접근 방식은 JavaScript 논리로 쉽게 액세스하고 조작할 수 있는 배열을 생성합니다.

Jinja2는 포괄적인 세트를 제공합니다. 출력을 조작하고 사용자 정의할 수 있는 구성 요소입니다. 예를 들어 for 루프를 사용하여 이전 예제를 단축할 수 있습니다.

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

로그인 후 복사

Jinja2의 tojson 필터를 사용하여 Python 개체를 JSON(JavaScript Object Notation) 문자열로 변환할 수도 있습니다.

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

로그인 후 복사

이러한 기술을 사용하면 Flask에서 JavaScript로 데이터를 효과적으로 전달할 수 있어 Python과 JavaScript 구성 요소 간의 원활한 통신이 가능해집니다.

위 내용은 Google Maps API와 같은 JavaScript 라이브러리에서 사용하기 위해 내 뷰 템플릿에서 Flask 애플리케이션의 데이터를 JavaScript로 전달하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!