it-source

플라스크에서 자바스크립트로 데이터를 템플릿으로 전달하려면 어떻게 해야 합니까?

criticalcode 2023. 7. 20. 21:59
반응형

플라스크에서 자바스크립트로 데이터를 템플릿으로 전달하려면 어떻게 해야 합니까?

내 앱은 사전을 반환하는 API로 호출합니다.이 딕트의 정보를 보기에서 자바스크립트로 전달하고 싶습니다.저는 JS에서 Google Maps API를 사용하고 있기 때문에, 특히 long/lat 정보가 포함된 튜플 목록을 전달하고 싶습니다.나는 그것을 알고 있습니다.render_templateHTML에서 사용할 수 있도록 이러한 변수를 보기에 전달합니다. 그러나 템플릿에서 JavaScript로 전달하려면 어떻게 해야 합니까?

from flask import Flask
from flask import render_template

app = Flask(__name__)

import foo_api

api = foo_api.API('API KEY')

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

사용할 수 있습니다.{{ variable }}HTML 부분뿐만 아니라 템플릿 내의 모든 위치에 저장할 수 있습니다.그래서 이것은 효과가 있을 것입니다.

<html>
<head>
  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" />
</body>
</html>

이를 2단계 프로세스라고 생각합니다.먼저, 진자(플라스크에서 사용하는 템플릿 엔진)가 텍스트 출력을 생성합니다.이 메시지는 표시된 JavaScript를 실행하는 사용자에게 전송됩니다.플라스크 변수를 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])" />
  </body>
</html>

또한 Jinja는 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>

사용할 수도 있습니다.for루프,if자세한 내용은 Jinja2 설명서를 참조하십시오.

또한 Jinja2의 표준 필터 세트에 추가된 필터를 지적하는 Ford의 답변을 살펴보세요.

2018년 11월 편집:tojson이제 Jinja2의 표준 필터 집합에 포함됩니다.

거의 모든 Python 객체를 JavaScript 객체로 가져오는 이상적인 방법은 JSON을 사용하는 것입니다. JSON은 시스템 간 전송 형식으로 훌륭하지만 때때로 JavaScript 객체 표기법을 의미한다는 것을 잊기도 합니다.즉, JSON을 템플릿에 주입하는 것은 객체를 설명하는 JavaScript 코드를 주입하는 것과 같습니다.

플라스크는 이에 대한 진자 필터를 제공합니다. 구조를 JSON 문자열에 덤프하고 진자가 자동으로 빠져나가지 않도록 안전하게 표시합니다.

<html>
  <head>
    <script>
      var myGeocode = {{ geocode|tojson }};
    </script>
  </head>
  <body>
    <p>Hello World</p>
    <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
  </body>
</html>

이것은 JSON 직렬화 가능한 모든 Python 구조에 대해 작동합니다.

python_data = {
    'some_list': [4, 5, 6],
    'nested_dict': {'foo': 7, 'bar': 'a string'}
}

var data = {{ python_data|tojson }};
alert('Data: ' + data.some_list[1] + ' ' + data.nested_dict.foo + 
      ' ' + data.nested_dict.bar);

HTML 요소에서 데이터 특성을 사용하면 인라인 스크립팅을 사용할 필요가 없으므로 보안을 강화하기 위해 더 엄격한 CSP 규칙을 사용할 수 있습니다.

다음과 같은 데이터 특성을 지정합니다.

<div id="mydiv" data-geocode='{{ geocode|tojson }}'>...</div>

그런 다음 정적 JavaScript 파일에서 다음과 같이 액세스합니다.

// Raw JavaScript
var geocode = JSON.parse(document.getElementById("mydiv").dataset.geocode);

// jQuery
var geocode = JSON.parse($("#mydiv").data("geocode"));

또는 엔드포인트를 추가하여 변수를 반환할 수 있습니다.

@app.route("/api/geocode")
def geo_code():
    return jsonify(geocode)

그런 다음 XHR을 수행하여 검색합니다.

fetch('/api/geocode')
  .then((res)=>{ console.log(res) })

작업 답변은 이미 제공되었지만 플라스크 변수를 사용할 수 없는 경우 Fail-safe 역할을 하는 체크를 추가하고 싶습니다.사용하는 경우:

var myVariable = {{ flaskvar | tojson }};

변수가 존재하지 않는 오류가 있는 경우 오류로 인해 예상치 못한 결과가 발생할 수 있습니다.이 문제를 방지하려면:

{% if flaskvar is defined and flaskvar %}
var myVariable = {{ flaskvar | tojson }};
{% endif %}

플라스크를 사용하여 소스된 스크립트에 변수를 전달하려는 사용자를 위한 또 다른 대안 솔루션으로, 외부 변수를 정의한 다음 다음과 같이 스크립트를 호출하여 이 작업을 수행할 수 있었습니다.

    <script>
    var myfileuri = "/static/my_csv.csv"
    var mytableid = 'mytable';
    </script>
    <script type="text/javascript" src="/static/test123.js"></script>

변수를 자진변입력면하에 하면,test123.js작동하지 않고 오류가 발생합니다.

<script>
    const geocodeArr = JSON.parse('{{ geocode | tojson }}');
    console.log(geocodeArr);
</script>

이jinja2를사용json 문를꾼자다 javascript 용니합사음다것열바로오코드플튜은지을여하ascript▁this,▁jav다▁uses▁jinascript▁the▁theoc를니▁then▁and▁turnja합▁ge▁to▁tupson.JSON.parse자바스크립트 배열로 변환합니다.

저는 이 일에 까다로운 방법이 있습니다.그 아이디어는 다음과 같습니다.

HTML만듭다니와 같은 보이지 HTML .<label>, <p>, <input>HTML 본문에서 등을 사용하고 태그 ID에 패턴을 만듭니다. 예를 들어 태그 ID에 목록 인덱스를 사용하고 태그 클래스 이름에 목록 값을 사용합니다.

여기에 같은 길이의 maintenance_next[] 및 maintenance_block_time[] 두 개의 목록이 있습니다.플라스크를 사용하여 이 두 리스트의 데이터를 자바스크립트로 전달하고 싶습니다.그래서 보이지 않는 라벨 태그를 가져다가 태그 이름을 목록 인덱스의 패턴으로 설정하고 클래스 이름을 인덱스의 값으로 설정합니다.

{% for i in range(maintenance_next|length): %}
<label id="maintenance_next_{{i}}" name="{{maintenance_next[i]}}" style="display: none;"></label>
<label id="maintenance_block_time_{{i}}" name="{{maintenance_block_time[i]}}" style="display: none;"></label>
{% endfor%}

그 후, 저는 간단한 자바스크립트 연산을 사용하여 자바스크립트로 데이터를 검색합니다.

<script>
var total_len = {{ total_len }};

for (var i = 0; i < total_len; i++) {
    var tm1 = document.getElementById("maintenance_next_" + i).getAttribute("name");
    var tm2 = document.getElementById("maintenance_block_time_" + i).getAttribute("name");
    
    //Do what you need to do with tm1 and tm2.
    
    console.log(tm1);
    console.log(tm2);
}
</script>

일부 js 파일은 사용자가 직접 작성하지 않고 웹 또는 라이브러리에서 가져옵니다.다음과 같은 변수를 얻을 수 있는 코드:

var queryString = document.location.search.substring(1);
var params = PDFViewerApplication.parseQueryString(queryString);
var file = 'file' in params ? params.file : DEFAULT_URL;

이 메서드는 js 파일을 변경하지 않고(독립성 유지) 변수를 올바르게 전달합니다!

언급URL : https://stackoverflow.com/questions/11178426/how-can-i-pass-data-from-flask-to-javascript-in-a-template

반응형

'it-source' 카테고리의 다른 글

판다 데이터 프레임에 열 추가  (0) 2023.07.20
Oracle SQL의 숫자 형식  (0) 2023.07.20
컨테이너 객체(Python)에 __iter__(자체)를 구현하는 방법  (0) 2023.07.20
Oracle에서 일주일 중 첫 번째와 마지막 날을 얻는 방법은 무엇입니까?  (0) 2023.07.20
Oracle SQL에서 MERGE를 수행할 때 소스에서 일치하지 않는 행을 업데이트하려면 어떻게 해야 합니까?  (0) 2023.07.20

'it-source'의 다른글

  • 현재글플라스크에서 자바스크립트로 데이터를 템플릿으로 전달하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바