jquery - 如何在JQuery中设置flask url

jquery - 如何在JQuery中设置flask url_for

转载作者：行者123 更新时间：2023-12-01 02:43:03

设置url_for() Jinja2 模板中的非常简单(只要它在 HTML 中)。我一直在尝试从 JQuery 内部设置它，如下所示:

<script>
    function my_func(key) {
        var newHref = sprintf("{{url_for('fig', selector='%s')}}", key);
        $('#my_id').attr('href', newHref);
    }
<script>

哪里sprintf只是 JQuery 的标准字符串格式化函数。

现在什么也没发生。

我也尝试过 onClick函数而不是 href 。它看起来像这样:

function my_Clicked(key) {
    $.ajax({
        type: 'GET',
        url: sprintf("{{ url_for('fig', selector = '%s')}}", key)
    });
}

再次，当 <button> 时什么也没有发生。被点击。

这可能吗？ Jinja2/Flask 标记 {{ }}似乎只出现在 HTML 中，并在页面加载时进行处理。但是，我不明白为什么您不能在页面加载后设置动态 URL，这样当您单击它时，请求就会发送回服务器。

<小时/>

编辑使用 odai alghamdi 建议的扩展后，我遇到了一个令人困惑的问题。

我要使用 onClick AJAX 调用 <button> 。现在看起来像这样:

function cropzoneClicked(key) {
    $.ajax({
        type: 'GET',
        url: flask_util.url_for('fig', {selector:key})
    });
}

但是，单击该按钮时没有任何反应。我知道该函数正在被调用，因为我可以在其中添加警报。但是，没有任何内容被渲染，并且 'GET'请求未返回成功回调

最佳答案

这里有一个例子，我从未真正考虑过需要从用户界面访问 url_for，但知道如何访问是很好的。当您单击按钮时，它将使用 id 作为 url_for 的键，并在警报框中显示生成的 URL。

需求.txt

flask
git://github.com/dantezhu/flask_util_js.git

然后安装它们，pip install -r requests.txt 到您的 virtualenv 中。

app.py

from flask import Flask, render_template
from flask_util_js import FlaskUtilJs

app = Flask(__name__)
fujs = FlaskUtilJs(app)


@app.context_processor
def inject_fujs():
    return dict(fujs=fujs)

@app.route('/')
def home():
    return render_template('example.html')

@app.route('/foo/<something>/')
def something(something):
    return 'Alright then {}'.format(something)

if __name__ == '__main__':
    app.run(debug=True)

示例.html

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    {{ fujs.js }}

    <script>
        $( document ).ready(function(){

            $("button").on("click", function() {
                var $button = $( this );
                var url = flask_util.url_for('something', {something: $button.attr('id') });
                alert(url);
            });
        });
    </script>
</head>
<body>
    <button id="button_a">First!</button>
    <button id="button_b">Second!</button>
    <button id="button_c">Third!</button>
</body>
</html>