如何在JQuery中设置flask url_fo



在Jinja2模板中设置url_for()非常简单(只要它在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建议的扩展之后,我遇到了一个令人困惑的问题。

我将使用<button>onClickAJAX调用。现在看起来是这样的:

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

但是,单击该按钮时不会发生任何事情。我知道函数正在被调用,因为我可以在其中粘贴警报。但是,没有任何内容被呈现,'GET'请求也没有返回成功的回调

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

requirements.txt

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

然后将它们pip install -r requirements.txt安装到您的虚拟机中。

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)

example.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>

最新更新