0

我正在尝试轮询复选框的状态（这是在 JS 中每三秒完成一次）。此解决方案返回“无”（参见下面的代码）；两个打印输出（带有“args”和“form”）都返回“无”。我期待真/假，这取决于复选框的布尔状态。

索引.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轮询函数（改编自此处）：

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

这应该很简单，但是我研究过的 SO 解决方案（例如，使用 jquery、调整flask/ajax 示例等）都不起作用。

编辑：遵循标记的建议（包括 javascript）并添加 print request.valuesindex.html 返回（在 Aptana 的控制台上看到）：

CombinedMultiDict([ImmutableMultiDict([]), ImmutableMultiDict([])])

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

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

这里有什么想法吗？

4

2 回答 2

0

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

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

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

当您有一个 HTTP 表单并单击“提交”按钮时，浏览器会做一些魔术来将请求中的所有值推送到服务器。当您只是执行一个简单的 AJAX 请求时，您不会发生任何事情。相反，您需要明确说明要作为数据传递给服务器的内容（尽管有一些插件可以帮助您“使用 AJAX 发布 HTML 表单的值”）。

因此，因为您从未在 Javascript 中执行任何操作来检索复选框的值以将其包含到 AJAX 请求中，所以 AJAX 请求没有指定复选框已选中的值。您需要让 jQuery检查该框是否已选中...

var isChecked = $('#testName').is(':checked');
# Now do something with isChecked...

但是，据我所知，您有点滥用 HTTP：该load函数将发出 GET 请求，并且您可能希望作为请求的请求发生某些事情。您可能想让它改为执行 POST 请求（请参见此处和此处）。此外，您提到您正在寻找在值更改时发布的内容。把它放在一起，你可以做这样的事情......

// Ensure that the function is called when the DOM is ready...
$(function() {
    // Register an event that should be fired when the checkbox value is changed
    $('#testName').change(function() {
        var data = { isChecked : $(this).is(':checked') };
        $.post('/', data);
    });
})

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

于 2013-09-30T22:48:06.697 回答
0

我将回答在问题的评论中发现的这个问题

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

所以很有可能在用户点击按钮时提交一个值

{% 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 调用来传递数据，而不是使用标准提交，但是本教程很好地涵盖了该主题。但是发回数据的基本更改看起来像

$( "#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 ""
于 2013-10-03T18:11:11.810 回答