>

웹 사이트에 Python Flask를 사용하고 몇 가지 매개 변수를 Javascript에 전달합니다. 이것은 내 코드입니다 :

from flask import Flask
from flask import render_template
app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html", param1="Hello")

<html>
   <head>
   </head>
   <body>
      <p>Hello World</p>
   </body>
   <script>console.log({{param1}})</script>
</html>

이 방법으로 문제없이 작동합니다. 예는 내 자신의 단순화입니다. 그러나 외부 파일에 스크립트를 넣고 다음과 같이 호출하려면 다음을 수행하십시오.

<html>
   <head>
   </head>
   <body>
      <p>Hello World</p>
   </body>
   <script src="/static/js/myjs.js"></script>
</html>

그리고 myjs.js  파일은 console.log({{param1}}) 입니다 그런 다음 작동하지 않습니다. 그렇다면 Python Flask를 사용하여 외부 Javascript 파일의 매개 변수를 전달할 수있는 방법이 있습니까?

  • 답변 # 1

    Jinja로 파일을 렌더링하려면 render_template 를 호출해야합니다.  그것에 원하는 값을 전달하십시오. 정적 파일에 직접 연결하는 것은 분명히 그렇게하지 않습니다. 한 가지 해결책은 Jinja의 include 를 사용하는 것입니다  블록. 이를 위해서는 'myjs.js'가 'templates/js'폴더에 있어야하며 렌더링 된 템플릿에 포함시켜 모든 템플릿 컨텍스트를 포함 된 템플릿으로 전달해야합니다.

    <script>{% include 'js/myjs.js' %}</script>
    
    

    더 나은솔루션은 모든 요청에서 js를 렌더링하지 않고 템플릿에서 js 함수로 매개 변수를 전달하지 않아도됩니다.

    <script src="{{ url_for('static', filename='js/myjs.js') }}"></script>
    <script>
        my_func({{ my_var|tojson }});
    </script>
    
    

  • 답변 # 2

    html 페이지에 지정된 자바 스크립트 파일을로드하는 다른 방법을 사용했습니다 :

    먼저, <head></head> 내부에 변수를 정의합니다  태그가 있으므로 자바 스크립트 파일을 호출합니다.

    <head>
    ...
    <script src="/static/js/jquery.js"></script>
    <script  type=text/javascript>
        $(document).ready(function() {
            $link_subcat = "{{ url_for('load_subcategories') }}";
            $link_cat = "{{ url_for('load_categories') }}";
        });
    </script>
    <script src="{{ url_for('static', filename='finances.js') }}"></script>
    ...
    
    

    이것은 내 자바 스크립트 파일 내용입니다 :

    $(document).ready(function() {
        $("#category").change(function() {
            $.ajax({
                type: "POST",
                url: $link_subcat,
                data: {cat: $(this).val()},
                success: function(data) {
                    $("#subcategory").html(data);
                }
            });
        });
        $("input[name=type]").change(function() {
            $.ajax({
                type: "POST",
                url: $link_cat,
                data: {type: $('input[name="type"]:checked').val()},
                success: function(data) {
                    $("#category").html(data);
                }
            });
        });
    });
    
    

    이 접근 방식은 저에게 효과적입니다.

관련 자료

  • 이전 javascript - 하나의 URL로 연결을 제한하기 위해 socketio 오리진을 설정하는 방법
  • 다음 c# - 서버 프로세스로 Excel 파일 읽기