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

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

Flask 애플리케이션의 API에서 데이터를 가져올 때 다음을 전달해야 할 수 있습니다. 해당 정보를 해당 템플릿의 JavaScript에 전달합니다. 이 기사에서는 Jinja2 템플릿의 강력한 기능을 활용하여 이를 달성하는 방법을 살펴봅니다.

Flask에서 render_template 함수를 사용하면 변수를 HTML 템플릿에 전달할 수 있습니다. 그러나 이러한 변수를 JavaScript에서 사용할 수 있도록 하려면 추가 단계가 필요합니다.

Flask에서 사용하는 템플릿 엔진인 Jinja2는 템플릿 내에 Python 표현식을 포함할 수 있는 구문을 제공합니다. 이는 JavaScript 스크립트 내를 포함하여 템플릿의 어느 곳에서나 {{ 변수 }}를 사용할 수 있음을 의미합니다.

예를 들어 API에서 좌표를 검색하는 다음 Flask 경로를 고려해 보세요.

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

해당 템플릿에서 다음과 같이 geocode 변수를 JavaScript에 전달할 수 있습니다.

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

이를 통해 JavaScript 코드에서 geocode[1]의 값에 someJavaScriptVar로 액세스할 수 있습니다.

또는 지오코드 변수를 배열로 전달하기 위해 템플릿에서 배열 정의를 생성할 수 있습니다.

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

Jinja2는 루프 및 if 문과 같은 고급 구성도 지원합니다. 복잡한 데이터 구조 생성을 단순화합니다.

또한 tojson 필터를 사용하여 지오코드 튜플을 JSON 문자열로 변환할 수 있으므로 JavaScript에서 사용하기에 더 적합해집니다.

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

이러한 기술을 통해 개발자는 Flask와 JavaScript 간에 데이터를 원활하게 공유하여 대화형의 동적 웹 애플리케이션을 구현할 수 있습니다.

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