Question

我有一个基本的Flask应用，可在复选框切换时更改状态。看起来像这样：

  <a href="/toggle/{{ id }}">
    <input type="checkbox" value="{{data.done}}" {% if data.done %} 
    checked {% endif %}>
  </a>

@app.route('/')
@app.route('/index')
def index():
    data = Data.query.all()
    return render_template('index.html', data=data)

@app.route('/toggle/<int:id>')
def toggle_status(id):
    data = Data.query.get(id)
    data.done = not data.done
    db.session.commit()
    return redirect('/')

然后在屏幕上打印一个（更新的）复选框总和（在表格列中）。但是，这仅适用于Firefox，而在Chrome上则看不到更改。

关于此问题的任何想法，还是更可靠的解决方案？

Answer 1

关于此问题的解决方法，有两点不好。 1）您正在使用锚标签进行复选框点击 2）您正在对路线中的切换使用GET调用，它应该是PUT或POST。

如果您不想使用Javascript，而只想使用python和HTML，我建议您使HTML使用表单。 WTForms是烧瓶的一个很好的表单工具，应该可以帮助您。提交表单时，后端（python）应该接受POST调用，该调用将更新数据库中的ID，并且可以重定向回页面。

如果您不想使用“提交”按钮，并且不介意使用javascript。我建议您使用jQuery之类的库来创建onClick侦听器，或者做出反应并将PUT请求发送到您的后端，从而触发您的toggle_status路由。这样，您甚至都不需要进行重定向，在进行异步调用时，前端可以与后端保持同步。这是有关如何进行AJAX调用https://www.airpair.com/js/jquery-ajax-post-tutorial

的指南

为什么要使用POST，PUT或GET？这是一个很好的博客，回答了这个问题：http://blog.teamtreehouse.com/the-definitive-guide-to-get-vs-post

如何在Flask中跟踪复选框的状态更改

1 个答案: