AJAX复选框无法同步状态问题排查（Flask Todo应用）

以下是导致问题的关键错误及对应修复方案：

1. 前端Fetch请求URL语法错误 #

构造请求路径时存在多余的逗号和加号，导致URL无效：

// 错误代码
fetch('/todo/', + todoId + '/set-completed', { ... })

// 修复后（推荐用模板字符串简化写法）
fetch(`/todo/${todoId}/set-completed`, {
    method: 'POST',
    body: JSON.stringify({
        'completed': newCompleted
    }),
    headers: {
        'Content-Type': 'application/json',
    },
})

2. 数据库模型缺失completed字段 #

后端Todo模型未定义completed字段，即使数据库手动创建该列，ORM也无法映射，赋值时会触发错误：

// 修改Todo模型，新增completed字段
class Todo(db.Model):
    __tablename__ = 'todo'
    id = db.Column(db.Integer, primary_key=True)
    description = db.Column(db.String(), nullable=False)
    completed = db.Column(db.Boolean, nullable=False, default=False)  # 新增这一行

    def __repr__(self):
        return f'<Todo {self.id} {self.description}>'

修改后需在Flask Shell中执行db.create_all()同步数据库结构，或使用迁移工具处理表变更。

3. 创建Todo时字段参数名不匹配 #

create_todo函数中实例化Todo时，错误使用description2作为参数名，与模型定义的description字段不符：

// 错误代码
todo = Todo(description2=description)

// 修复后
todo = Todo(description=description)

4. 后端接口返回值不符合前端预期 #

set_completed_todo接口返回重定向响应，而前端fetch请求期望JSON格式，导致触发错误捕获逻辑：

// 修改接口返回为JSON格式
@app.route('/todo/<todo_id>/set-completed', methods=['POST'])
def set_completed_todo(todo_id):
    try:
        completed = request.get_json()['completed']
        todo = Todo.query.get(todo_id)
        todo.completed = completed
        db.session.commit()
        return jsonify({'success': True})
    except Exception as e:
        db.session.rollback()
        print('错误详情:', e)  # 后端打印错误便于排查
        return jsonify({'success': False}), 500
    finally:
        db.session.close()

5. 前端错误捕获未输出具体信息 #

原catch块未传递错误参数，无法在控制台查看具体错误原因：

// 修复后
.catch(function(error) {
    document.getElementById('error').className = '';
    console.error('更新失败:', error);
})

内容的提问来源于stack exchange，提问作者pheloumi