Flask의 데이터를 템플릿의 JavaScript로 전달하고 Google 지도에서 사용하는 방법은 무엇입니까?
- Linda Hamilton원래의
- 2024-10-30 13:57:27968검색
Flask에서 템플릿의 JavaScript로 데이터 전달
문제: JavaScript 코드의 API 호출에서 검색된 사전을 활용하려고 합니다. 특히 장/위도 튜플을 Google Maps API에 전달하기 위해 Flask 템플릿 내에서 사용합니다.
해결책:
Flask에서 템플릿의 JavaScript로 변수를 전달하려면 그 안 어디에서나 {{ 변수 }} 구문을 사용할 수 있습니다. 예를 들어, get_data.html 템플릿에서
<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에 전달하려면 다음을 생성해야 합니다. 출력에 배열 정의:
<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 구성도 지원합니다. 예를 들어 위 내용은 다음과 같이 단축할 수 있습니다.
<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 개체로 변환할 수 있습니다.
<script>
var myGeocode = {{ geocode|tojson }};
</script>위 내용은 Flask의 데이터를 템플릿의 JavaScript로 전달하고 Google 지도에서 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.