Flask url_for Javascript中的URL

时间:2012-04-25 11:37:49

标签: javascript python flask url-for

使用flask时,在Javascript文件中创建动态URL的推荐方法是什么?在jinja2模板和python视图中使用url_for,在.js文件中执行此操作的建议方法是什么?因为它们不是由模板引擎解释的。

基本上想要做的是:

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

哪种情况不可能。

但很自然,我可以在模板中执行它:

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

8 个答案:

答案 0 :(得分:28)

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

答案 1 :(得分:15)

Flask documentation建议在HTML文件中使用url_for来设置包含您可以在其他位置访问的根URL的变量。然后,您必须手动构建视图URL,尽管我猜您可以将它们存储为类似于根URL。

答案 2 :(得分:3)

@ jeremy的答案是正确的,可能是更常见的方法,但作为替代答案,请注意dantezhu编写并发布了flask extension声称要执行确切的url-route-map-to - 评论中建议的javascript翻译。

答案 3 :(得分:2)

我使用这个肮脏而丑陋的伎俩:

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

其中scale是我想用于AJAX请求的javascript变量。 因此,url_for生成一个URL,JavaScript在运行时替换该参数。生成的代码类似于:

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

这很奇怪,但仍然找不到更优雅的解决方案。

事实上,链接的烧瓶扩展的looking at the code,它做同样的事情,但管理一般情况。

答案 4 :(得分:2)

正在寻找解决方案,他们想出了这个解决方案

  • 无需加载项

  • 没有硬编码网址

关键是要意识到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()
})

答案 5 :(得分:0)

就我而言, 我试图动态创建网址

我解决了我的问题如下(注意:我已将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>

答案 6 :(得分:-2)

我试图在按下按钮时调用FLASK路线。它应该收集响应并更新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>

答案 7 :(得分:-3)

我建议:

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

适合我的工作