使用Flask处理Twitter Bootstrap事件 [英] Processing Twitter Bootstrap Events with Flask

问题描述

我在网上应用程序上有一组推特引导按钮，我需要将选择传递给Flask，而我不想使用提交按钮。

 < div id =radios1class =btn-group view-opt-btn-groupdata-toggle = 按钮无线电> 
< button type =buttonclass =btn activename =choice1value =A> A< / button> 
< button type =buttonclass =btnname =choice1value =B> B< / button> 
< button type =buttonclass =btnname =choice1value =C> C< / button> 
< button type =buttonclass =btnname =choice1value =D> D< / button> 
< button type =buttonclass =btnname =choice1value =E> E< / button> 
< / div> 
  

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

我已经看到一些解决方案有一个隐藏的按钮，用一个jquery函数来更新隐藏按钮的值，但是这个选择是如何传递给flask的：

 < div id =radios1class =btn-group view-opt-btn-groupdata-toggle =buttons-radio> 
< button type =buttonclass =btn activename =choice1value =A> A< / button> 
< button type =buttonclass =btnname =choice1value =B> B< / button> 
< button type =buttonclass =btnname =choice1value =C> C< / button> 
< button type =buttonclass =btnname =choice1value =D> D< / button> 
< button type =buttonclass =btnname =choice1value =E> E< / button> 
< input type =hiddenname =choice1value = {{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，你必须这样做：

 < div id =radios1class =btn-group view-opt-btn-groupdata-toggle =buttons-radio> 
< button type =buttonclass =btn activename =choice1value =A> A< / button> 
< button type =buttonclass =btnname =choice1value =B> B< / button> 
< button type =buttonclass =btnname =choice1value =C> C< / button> 
< button type =buttonclass =btnname =choice1value =D> D< / button> 
< button type =buttonclass =btnname =choice1value =E> E< / button> 
< input type =hiddenname =choice1value = {{request.form ['choice1']}} /> 
< / div> 
 
< script type =text / jscript> 
 $（＃radios button）。click（function（）{
 $ .post（/ your_url_mapped_in_flask，{choice1：$（this）.val（）}）; 
 }）; 
< / script> 
  

这个脚本会发送一个POST请求给Flask中映射的动作。在Flask中，你必须像这样处理：

$ $ $ $ code $ @ app.route（/ your_url_mapped_in_flask）
def my_action （）：
choice = request.form ['choice1']
＃做任何你想做的事情的选择

我认为他们是基础知识。您也可以从服务器返回成功消息，并处理它以在视图中显示它。或者你可以通过GET请求来完成，获得函数，但是参数必须通过 request.args.get 而不是 request.form 。

如果我的帖子不够清楚，你也可以看一下 Flask中的AJAX的官方示例或者到<$ c $ （）或 $。getJSON（） jquery的功能：

$ ul $ b $ li $ get ： http://api.jquery.com/jQuery.get/

post ： http://api.jquery.com/jQuery .post /

getJSON ： http://api.jquery.com/jQuery.getJSON/

I have a set of Twitter Bootstrap buttons on a web-app, I need to pass the selection to Flask, and I don't want to use a submit button.

<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 automatically updates the class="btn active" setting, depending on the click. But how do I pass the selected button to Flask? I would like the button click to call a function in the flask app (a python function) and update a particular setting, but I don't want to reload the entire webpage upon each click.

I have seen some solutions that have a hidden button, with a jquery function that updates the value of the hidden button, but how does that selection get passed to 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>
    <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>

Thanks!

解决方案

If you want to send an AJAX request to Flask you have to do something like that:

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

This script will send a POST request to the action mapped in Flask. In Flask you have to process it like that:

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

I think they are the basics. You can also return from the server a success message and process it to show it in the view. Or you can do that with a GET request and the get function, but the arguments have to be recovered with request.args.get instead of request.form.

If my post it isn't clear enough, you can also take a look to the official example of AJAX in Flask or to the $.get(), $.post() or $.getJSON() functions of Jquery:

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

这篇关于使用Flask处理Twitter Bootstrap事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！