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

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

Flask에서 render_template() 함수는 HTML에서 사용할 수 있도록 변수를 뷰에 전달합니다. 그러나 동일한 템플릿 내에서 어떻게 데이터를 JavaScript로 전달할 수 있습니까?

Flask 앱이 사전을 반환하는 API를 호출하는 다음 예를 고려해 보세요. 목표는 Google Maps API와 함께 사용할 수 있도록 경도 및 위도 정보를 JavaScript에 전달하는 것입니다.

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

솔루션

Flask를 사용하면 {{ 변수를 사용할 수 있습니다. }} 자리 표시자 구문은 JavaScript 코드를 포함하여 템플릿의 어느 위치에나 있습니다.

지오코드 데이터를 JavaScript로 전달하려면 간단히 {{ }} 자리 표시자 내에 포함하면 됩니다.

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

이렇게 하면 됩니다. geocode[1](경도) 값을 JavaScript 변수 someJavaScriptVar에 삽입합니다.

데이터를 배열로 전달하려면 Join() 함수를 사용할 수 있습니다.

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

이렇게 하면 다음 JavaScript가 생성됩니다.

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

{{ }} 자리 표시자 내에서 for 루프 및 if 문과 같은 고급 구문을 사용할 수도 있습니다. 자세한 내용은 Jinja2 문서를 참조하세요.

또한 tojson 필터를 사용하여 Python 객체를 JavaScript에서 직접 사용할 수 있는 JSON 문자열로 변환할 수 있습니다.

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

이 접근 방식은 다음을 제공합니다. 복잡한 데이터 구조를 Flask에서 템플릿의 JavaScript로 전달하는 편리한 방법입니다.

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