
Flask에서 템플릿의 JavaScript로 데이터 전달
문제: JavaScript 코드의 API 호출에서 검색된 사전을 활용하려고 합니다. 특히 장/위도 튜플을 Google Maps API에 전달하기 위해 Flask 템플릿 내에서 사용합니다.
해결책:
Flask에서 템플릿의 JavaScript로 변수를 전달하려면 그 안 어디에서나 {{ 변수 }} 구문을 사용할 수 있습니다. 예를 들어, get_data.html 템플릿에서
1 2 3 4 5 6 7 8 9 10 11 | <html>
<head>
<script>
var someJavaScriptVar = '{{ geocode[1] }}' ;
</script>
</head>
<body>
<p>Hello World</p>
<button onclick= "alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" >Click me</button>
</body>
</html>
|
로그인 후 복사
이렇게 하면 JavaScript 변수 할당이 포함된 HTML 출력이 생성됩니다.
목록을 JavaScript에 전달하려면 다음을 생성해야 합니다. 출력에 배열 정의:
1 2 3 4 5 6 7 8 9 10 11 | <html>
<head>
<script>
var myGeocode = [ '{{ geocode[0] }}' , '{{ geocode[1] }}' ];
</script>
</head>
<body>
<p>Hello World</p>
<button onclick= "alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" >Click me</button>
</body>
</html>
|
로그인 후 복사
Jinja2는 고급 Python 구성도 지원합니다. 예를 들어 위 내용은 다음과 같이 단축할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 | <html>
<head>
<script>
var myGeocode = [{{ ', ' .join(geocode) }}];
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert( 'Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>
|
로그인 후 복사
Jinja2 필터를 활용할 수도 있습니다. 사전이 JSON 형식인 경우 tojson 필터를 사용하여 JavaScript 개체로 변환할 수 있습니다.
1 2 3 | <script>
var myGeocode = {{ geocode|tojson }};
</script>
|
로그인 후 복사
위 내용은 Flask의 데이터를 템플릿의 JavaScript로 전달하고 Google 지도에서 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!