使用 Flask 处理 Twitter 引导事件答案

【问题标题】：Processing Twitter Bootstrap Events with Flask使用 Flask 处理 Twitter 引导事件
【发布时间】：2013-04-22 09:56:23
【问题描述】：

我在网络应用上有一组 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 引导程序会根据点击自动更新 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>

谢谢！

【问题讨论】：

你知道什么是 AJAX 吗？
没错，但是有没有一个通过 Flask 处理选定按钮的好例子？
当按钮状态发生变化时，只需从 Javascript 发出 HTTP 请求（如果您使用 Javascript 框架，这将非常容易）。然后在您的烧瓶应用程序中为该请求编写一个处理程序并执行您想要执行的处理。
当您使用 JQuery 时，请查看 get 或 post 函数示例。
Twitter Bootstrap 没有直接传递按钮点击的能力似乎很奇怪。为什么我必须使用隐藏按钮和 jquery，这似乎是一个 hack 解决方案。

标签： python twitter-bootstrap flask

【解决方案1】：

如果你想向 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.get 而不是 request.form 来恢复参数。

如果我的帖子不够清楚，你也可以看看the official example of AJAX in Flask或者Jquery的$.get()、$.post()或者$.getJSON()函数：

get: http://api.jquery.com/jQuery.get/
post: http://api.jquery.com/jQuery.post/
getJSON: http://api.jquery.com/jQuery.getJSON/

【讨论】：