44

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

基本上想要做的是：

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

这是不可能的。

但很自然，我可以在模板中执行它：

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

9 回答 9

39

@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>
于 2015-01-05T17:25:05.270 回答
16

Flask 文档建议在您的 HTML 文件中使用来url_for设置一个包含您可以在其他地方访问的根 URL 的变量。然后，您必须在此基础上手动构建视图 URL，尽管我猜您可以将它们存储为类似于根 URL。

于 2012-04-26T14:38:27.087 回答
7

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

  • 无需附加组件

  • 没有硬编码 URL

关键是要实现Jinja2开箱即用的 javascript 渲染能力。

将您的模板文件夹设置为如下所示：

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

在你的意见.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()
})
于 2015-10-23T23:13:54.480 回答
3

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

于 2012-11-29T16:04:07.447 回答
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')

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

事实上，查看链接的烧瓶扩展的代码，它做同样的事情，但管理一般情况。

于 2013-03-07T10:53:28.740 回答
1

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

我按如下方式解决了我的问题（注意：我已将 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>
于 2015-04-26T00:47:54.580 回答
0

通过将“tojson”与 Jinja2 和 Flask 一起使用，我能够将动态创建的 url 路由传递给 javascript 函数。

要将动态 url 从 html 模板传递给 js，只需在 jinja 语句的末尾添加“|tojson”即可将其转换为适当的格式。

代替：

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

尝试：

<script>
 var route = {{ url_for('comment.comment_reply')|tojson }};
 yourJavaScriptFunction(route);
</script>

然后，您将能够将 js 函数中的路由用作您需要的任何正确路由。

yourJavaScriptFunction(route){
 console.log(route);
}
于 2021-11-23T20:16:44.393 回答
-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>
于 2018-08-14T11:03:20.117 回答
-3

我建议这样做：

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

对我来说很好

于 2016-09-09T10:16:14.437 回答