0

我在网络应用程序上有一组 Twitter Bootstrap 按钮，我需要将选择传递给 Flask，我不想使用提交按钮。

<div id="radios1" class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn active" name="choice1" value="A">A</button>
    <button type="button" class="btn" name="choice1" value="B">B</button>
    <button type="button" class="btn" name="choice1" value="C">C</button>
    <button type="button" class="btn" name="choice1" value="D">D</button>
    <button type="button" class="btn" name="choice1" value="E">E</button>
</div>

Twitter bootstrap 会根据点击自动更新 class="btn active" 设置。但是如何将选定的按钮传递给 Flask？我希望单击按钮以调用烧瓶应用程序中的函数（python 函数）并更新特定设置，但我不想在每次单击时重新加载整个网页。

我已经看到一些具有隐藏按钮的解决方案，带有更新隐藏按钮值的 jquery 函数，但是该选择如何传递给烧瓶：

<div id="radios1" class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn active" name="choice1" value="A">A</button>
    <button type="button" class="btn" name="choice1" value="B">B</button>
    <button type="button" class="btn" name="choice1" value="C">C</button>
    <button type="button" class="btn" name="choice1" value="D">D</button>
    <button type="button" class="btn" name="choice1" value="E">E</button>
    <input type="hidden" name="choice1" value={{request.form['choice1']}} />
</div>

<script type="text/jscript">
    $("body").find("#radios1").children().each(function () {
        $(this).bind('click', function () {
            $("input[name=choice1]").val(this.value);
            });
    });
</script>

谢谢！

4

1 回答 1

2

如果您想向 Flask 发送 AJAX 请求，您必须执行以下操作：

<div id="radios1" class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn active" name="choice1" value="A">A</button>
    <button type="button" class="btn" name="choice1" value="B">B</button>
    <button type="button" class="btn" name="choice1" value="C">C</button>
    <button type="button" class="btn" name="choice1" value="D">D</button>
    <button type="button" class="btn" name="choice1" value="E">E</button>
    <input type="hidden" name="choice1" value={{request.form['choice1']}} />
</div>

<script type="text/jscript">
    $("#radios button").click(function() {
        $.post("/your_url_mapped_in_flask", { choice1: $(this).val() } );
    });
</script>

该脚本将向 Flask 中映射的操作发送 POST 请求。在 Flask 中，你必须像这样处理它：

@app.route("/your_url_mapped_in_flask")
def my_action():
   choice = request.form['choice1']
   # Do whatever you want to do with the vble choice

我认为它们是基础。您还可以从服务器返回成功消息并对其进行处理以将其显示在视图中。或者您可以使用 GET 请求和函数来执行此操作，但必须使用而不是get恢复参数。request.args.getrequest.form

如果我的帖子不够清楚，您还可以查看Flask 中 AJAX 的官方示例或 Jquery的$.get(),$.post()或$.getJSON()函数：

于 2013-04-29T06:47:52.637 回答