Flask url для URL-адресов в Javascript


Каков рекомендуемый способ создания динамических URL-адресов в файлах Javascript при использовании flask? В шаблонах jinja2 и в представлениях python используется url_for, как это рекомендуется делать в файлах .js? Так как они не интерпретируются шаблонным движком.

То, что в основном хотят сделать, это:

// in comments.js
$.post(url_for('comment.comment_reply'));

Что невозможно.

Но, естественно, я могу выполнить это в шаблоне:

<script>
    $.post(url_for('comment.comment_reply'));
</script>
8   31  

8 ответов:

То, что предлагает @dumbmatter, в значительной степени считается де-факто стандартным способом. Но я думал, что есть более приятный способ сделать это. Поэтому мне удалось разработать этот плагин: Flask-JSGlue .

После добавления {{ JSGlue.include() }} в исходном коде можно сделать следующее:

<script>
    $.post(Flask.url_for('comment.comment_reply', {article_id: 3}));
</script>

Или:

<script>
    location.href = Flask.url_for('index', {});
</script>

ДокументацияFlask предлагает использовать url_for в вашем HTML-файле для установки переменной, содержащей корневой URL-адрес, к которому вы можете получить доступ в другом месте. Затем вам придется вручную построить URL-адреса представления поверх этого, хотя я думаю, что вы можете хранить их аналогично корневому URL-адресу.

Ответ@jeremy's правильный и, вероятно, более распространенный подход, но в качестве альтернативного ответа обратите внимание, что dantezhu написал и опубликовал расширение flask, которое утверждает, что делает точный перевод url-route-map-to-javascript, предложенный в комментарии.

Я использую этот грязный и уродливый трюк:

"{{url_for('mypage', name=metadata.name,scale=93,group=2)}}"
.replace('93/group',scale+'/group')

Где scale - переменная javascript, которую я хочу использовать для запроса AJAX. Итак, url_for генерирует URL и JavaScript заменяет параметр во время выполнения. Сгенерированный код выглядит примерно так:

"/ajaxservive/mynam/scale/93/group/2".replace('93/group',scale+'/group')

Что довольно странно, но все же не могу найти более элегантных решений.

Фактически, глядя на код связанного расширения колбы, он делает то же самое, но управляет общим случаем.

Искали решение, они придумали это решение, где

  • Надстройка не требуется

  • Нет жесткого кода URL

Ключ в том, чтобы понять, что Jinja2 имеет возможность рендеринга javascript из коробки.

Настройте папку шаблона примерно так, как показано ниже:

/template
    /html
        /index.html
    /js
        /index.js

В вашем views.py

@app.route("/index_js")
def index_js():
    render_template("/js/index.js")

Теперь вместо того, чтобы обслуживать javascript из вашей статической папки. Вы будет использовать:

<script src="{{ url_for('index_js') }}"></script>

В конце концов, вы генерируете javascript на лету, это больше не статический файл.


Теперь, внутри вашего файла javascript, просто используйте url_for, как и в любом файле html.

Например, используя Jquery, чтобы сделать запрос Ajax

$.ajax({
  url: {{ url_for('endpoint_to_resource') }},
  method: "GET",
  success: call_back()
})

В моем случае, Я пытался динамически создавать URL-адреса

Я решил свою проблему следующим образом (Примечание: я поменял синтаксис Angular на {[x]}:

<ul>
    <li ng-repeat="x in projects">
        {[x.title]}
        {% set url = url_for('static',filename="img/") %}

        <img src="{{url}}{[x.img]}">
    </li>
</ul>

Я пытался вызвать маршрут колбы, когда нажата кнопка. Он должен собрать ответ и обновить div. Страница не должна перезагружаться.

Для этого я использовал jquery.

Вот код:

@app.route('/<name>')
def getContent(name):
    return 'This is %s' % name

HTML:

    <div id="mySpace" class="my-3">Count</div>

    <button id="next_id" class="btn btn-primary">Press</button>

    <script>
        $('#next_id').click(function (){
            $.get('/aroy', function(data, status){
            $('#mySpace').html(data);
        });
        });
    </script>

Я предлагаю следующее:

<script src="{{ url_for('static', filename='js/jquery.js') }}" type="text/javascript">
</script>

Отлично работает для меня