Question

我正在尝试轮询复选框的状态（这是在JS中每三秒完成一次）。 This solution返回“无”（请参阅下面的代码）;两个打印输出（带有'args'和'form'）都返回“None”。我期待True / False，具体取决于复选框的布尔状态。

的index.html ：

{% extends "layout.html" %}
{% block content %}
   <div  id="results" class="container">{{data_load|safe}}</div>
   <input id='testName' type='checkbox' value='Yes' name='testName'>
{% endblock %}

以及相关的烧瓶应用代码段：

@app.route('/', methods = ['GET', 'POST'])
def index(): 
    return render_template('index.html', data_load=timertry()) 

@app.route('/_timertry', methods = ['GET', 'POST']) 
def timertry():    
    print request.args.get('testName')  
    print request.form.get('testName')
    return "some html going into 'results' div.."

JavaScript 投票功能（改编自here）：

$(document).ready(function() {
$.ajaxSetup({cache : false});
setInterval(function() {
    $('#results').load('/_timertry?' + document.location );
}, 3000); // milliseconds!
});

这应该很简单，但我没有查看过的SO解决方案（例如，使用jquery，调整flask/ajax example等）。

编辑：跟随马克的建议（包括javascript）并添加 index.html中的print request.values返回（在Aptana的控制台上看到）：

CombinedMultiDict（[ImmutableMultiDict（[]），ImmutableMultiDict（[]）]）

显然，请求似乎是空的。记录发布请求（按下复选框时）：

127.0.0.1 - - [03 / Oct / 2013 00:11:44]“POST / index HTTP / 1.1”200 -

这里有什么想法吗？

Answer 1

您的javascript每三秒执行以下操作...

$('#results').load('/_timertry?' + document.location);

换句话说，您正在使用jQuery load()函数。该函数的文档声明，实际上，这将调用对您提供的URL的HTTP get请求作为参数（类似/_timertry?http://www.example.org。）换句话说，将向{{1}调用GET请求}，将由Flask的/timertry?http://www.example.org方法处理。

如果您有一个HTTP表单，并且单击“提交”按钮，浏览器会将所有值推送到请求中的服务器。当你只是做一个简单的AJAX请求时，这一切都不适合你。相反，您需要明确说明您希望将哪些内容作为数据传递给服务器（尽管有一些插件可以帮助您“使用AJAX发布HTML表单的值”）。

因此，因为您在Javascript中没有做任何事情来检索复选框的值以将其包含在AJAX请求中，所以AJAX请求没有指定复选框被选中的值。你需要有jQuery check if the box is checked ...

timertry

然而，据我所知，您有点滥用HTTP：var isChecked = $('#testName').is(':checked'); # Now do something with isChecked...函数会发出GET请求，您可能希望某些事情发生在请求请求中。您可能希望改为执行POST请求（请参阅here和here）。此外，您提到您在更改值时要查找要发布的内容。把它们放在一起，你可以做这样的事情......

load

在这种情况下，我们有一个在选中复选框时调用的事件，该事件会导致我们向服务器发出POST请求。

Answer 2

我将回答这个问题的评论中提到的问题

“这就成了如何在没有'提交'按钮的情况下提交表单的问题。”

因此，当用户点击按钮

时，可以提交一个值

{% block content %}
   <form id="target" action="YourViewName"> 
       <div  id="results" class="container">{{ data_load|safe }}</div>
       <input id='testName' type='checkbox' value='Yes' name='testName'>
   </form>
{% endblock %}

$( "#results" ).click(function() {
    $( "#target" ).submit();
});

但是，如果你想留在同一个页面上，你将需要使用ajax调用来传回数据而不是使用标准提交，但是This tutorial covers that topic fairly well.但是要发送一个基本的更改返回的数据看起来像

$( "#results" ).click(function() {
     var request = $.ajax({
         type: "POST",
         url: "/YourViewName",
         data: {'input_value':$('#testName').val()},
         dataType: "html"
         }).done(function(msg) {
              // I don''t know what you want to do with a return value...
              // or if you even want a return value
  }
});

并且烧瓶看起来像

@app.route("/YourViewName")
def example():
    list_name = request.args.get("input_value")
    #if you don't want to change the web page just give a blank return
return ""

获取烧瓶中的复选框值

2 个答案: