Python 我如何在烧瓶中正确填写申请路线？

使用Flask和SQLAlchemy，我有两个模型：

Todo列表

-Todo的父级

Todo

-ToDoList的子级

我已经创建了一个控制器，从

ToDoList

获取复选框输入，该复选框还更新其

Todo

子记录。当我查询数据库时，它工作得很好

我遇到的问题是，当我单击

Todolist

复选框时，我希望视图立即更新todo列表及其关联的todo，它们彼此并排显示。这不会发生。它只在我点击“重新加载”时更新

这是我的控制器代码：

@app.route('/lists/<list_id>/set-completed', methods=['POST'])
def set_completed_list(list_id):
    try:
        completed = request.get_json()['completed']
        todo_list = ToDoList.query.get(list_id)
        todo_list.completed = completed
        db.session.query(Todo).filter_by(list_id=list_id).update({"completed": completed}, synchronize_session='fetch')
        db.session.commit()
    except:
        db.session.rollback()
    finally:
        db.session.close()
        return redirect(url_for('get_list_todos', list_id=list_id))

@app.route('/lists/<list_id>')
def get_list_todos(list_id):
    return render_template('index.html', active_list=ToDoList.query.get(list_id), lists=ToDoList.query.all(), todos=Todo.query.filter_by(list_id=list_id).order_by('id').all())

---

我还在学习。有人能看到我遗漏的任何明显错误吗？

关于Ajax，我还有很多东西要学。我不明白控制器和视图如何在Ajax调用上交互。我假设控制器可以将浏览器指向它需要去的地方，但我真正需要做的是让浏览器知道操作已经成功，使用响应，然后让Javascript在视图端重新加载页面：

控制器：

@app.route('/lists/<list_id>/set-completed', methods=['POST'])
def set_completed_list(list_id):
    error = False
    try:
        completed = request.get_json()['completed']
        todo_list = ToDoList.query.get(list_id)
        todo_list.completed = completed
        db.session.query(Todo).filter_by(list_id=list_id).update({"completed": completed}, synchronize_session='fetch')
        db.session.commit()
    except:
        db.session.rollback()
        error = True
    finally:
        db.session.close()
    if error:
        abort(500)
    else:
        return jsonify({'success': True})

@app.route（'/lists//set completed'，methods=['POST']）
def设置完成列表（列表id）：
错误=错误
尝试：
completed=request.get_json（）['completed']
todo\U list=ToDoList.query.get（列表id）
todo_list.completed=已完成
db.session.query（Todo）.filter_by（list_id=list_id）.update（{“completed”：completed}，synchronize_session='fetch'）
db.session.commit（）
除：
db.session.rollback（）
错误=真
最后：
db.session.close（）
如果出现错误：
中止（500）
其他：
返回jsonify（{'success'：True}）

客户端Javascript：

   const list_checkboxes = document.querySelectorAll('.list-check-completed');
    for (let i = 0; i < list_checkboxes.length; i++) {
      const list_checkbox = list_checkboxes[i];
      list_checkbox.onchange = function (e) {
        console.log('event', e);
        const list_newCompleted = e.target.checked;
        const listId = e.target.dataset['id'];
        fetch('/lists/' + listId + '/set-completed', {
          method: 'POST',
          body: JSON.stringify({
            'completed': list_newCompleted,
          }),
          headers: {
            'Content-Type': 'application/json',
          }
        })
          .then(response => response.json())
          .then(jsonResponse => {
          console.log('response', jsonResponse);
          window.location.reload(true);
          document.getElementById('error').className = 'hidden';
        })
          .catch(function () {
            document.getElementById('error').className = '';
          })
      }
    }

const list_checkbox=document.querySelectorAll（“.list check completed”）；
for（设i=0；iresponse.json（））
。然后（jsonResponse=>{
log（'response'，jsonResponse）；
window.location.reload（true）；
document.getElementById（'error'）。className='hidden'；
})
.catch（函数（）{
document.getElementById（'error'）。className=''；
})
}
}

---

窗口.location.reload（true）

负责重新加载。

我不认为这是由于您的路径中的代码中存在错误造成的。在我看来，您在理解ajax请求的行为时遇到了问题。如何在请求中使用服务器的答案？重定向函数默认发送http状态代码302（已找到）和包含url的位置标头。在常规调用的情况下，浏览器现在将独立调用指定的地址。对于ajax请求，您必须自己处理。谢谢@Detlef。正如您所说，我误解了视图和控制器如何与Ajax调用交互。我将回答这个问题，以便其他noob可以看到结果。再次感谢您的澄清。

   const list_checkboxes = document.querySelectorAll('.list-check-completed');
    for (let i = 0; i < list_checkboxes.length; i++) {
      const list_checkbox = list_checkboxes[i];
      list_checkbox.onchange = function (e) {
        console.log('event', e);
        const list_newCompleted = e.target.checked;
        const listId = e.target.dataset['id'];
        fetch('/lists/' + listId + '/set-completed', {
          method: 'POST',
          body: JSON.stringify({
            'completed': list_newCompleted,
          }),
          headers: {
            'Content-Type': 'application/json',
          }
        })
          .then(response => response.json())
          .then(jsonResponse => {
          console.log('response', jsonResponse);
          window.location.reload(true);
          document.getElementById('error').className = 'hidden';
        })
          .catch(function () {
            document.getElementById('error').className = '';
          })
      }
    }