Блог

Главная - Вопросы по программированию - Передать параметр с помощью Python Flask во внешнем Javascript

Передать параметр с помощью Python Flask во внешнем Javascript

#html #jquery #flask

#javascript #python #flask

Вопрос:

Я использую 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}}) , тогда он не работает. Итак, есть ли какой-либо способ передать параметры во внешних файлах Javascript с помощью Python Flask?

Комментарии:

1. скрипт должен быть внутри каталога шаблонов

2. У меня есть две папки: 1) статические и 2) шаблоны. В статической папке есть css, js и изображения. Должен ли я переместить файлы js в шаблоны ijn, чтобы заставить его работать?

Ответ №1:

Если вы хотите отобразить файл с помощью Jinja, вам нужно вызвать render_template его и передать ему нужные значения. Очевидно, что простая ссылка непосредственно на статический файл этого не делает. Одним из решений является использование include блока Jinja. Для этого требуется, чтобы ‘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:

Я использовал другой способ загрузки файла javascript, указанного на HTML-странице:

Во-первых, я определяю некоторые переменные внутри <head></head> тегов и поэтому вызываю свой файл javascript:

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

Это содержимое моего файла javascript:

 $(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);
            }
        });
    });

});

Этот подход работает для меня.

Метки: