[英]Flask url_for URLs in Javascript
使用 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>
@ 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文档建议在HTML文件中使用url_for
来设置包含您可以在其他地方访问的根URL的变量。 然后,您必须手动构建视图URL,尽管我猜您可以将它们存储为类似于根URL。
@ jeremy的答案是正确的,可能是更常见的方法,但作为替代答案,请注意dantezhu
编写并发布了一个烧瓶扩展 ,声称在评论中建议进行精确的url-route-map-to-javascript翻译。
我使用这个肮脏和丑陋的技巧:
"{{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')
这很奇怪,但仍然找不到更优雅的解决方案。
正在寻找解决方案,他们想出了这个解决方案
不需要加载项
没有硬编码的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文件里面,只需像在任何html
文件中那样使用url_for
。
例如,使用Jquery
发出Ajax请求
$.ajax({
url: {{ url_for('endpoint_to_resource') }},
method: "GET",
success: call_back()
})
就我而言,我试图动态创建网址
我解决了我的问题如下(注意:我已将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>
通过在 Jinja2 和 Flask 中使用“tojson”,我能够将动态创建的 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);
}
当按下按钮时,我试图调用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>
我建议这个:
<script src="{{ url_for('static', filename='js/jquery.js') }}" type="text/javascript">
</script>
对我来说很好
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.