CS50 web应用期末项目求助：点击按钮无法删除SQLite数据表行数据

核心错误原因 #

你目前的代码有三个核心问题，导致点击删除按钮无响应：

1. 后端的删除逻辑函数没有配置对应的Flask路由，服务器无法识别删除请求
2. 前端onclick="delete()"调用的是不存在的JS函数，无法和后端的Python删除函数直接通信
3. 按钮的type="delete"是无效属性，不会触发任何默认行为

逐步修改方法 #

第一步：修改后端application.py代码 #

给删除函数加上路由配置，完整修改后的代码如下：

@app.route("/", methods=["GET", "POST"])
def index():
  if request.method == "POST":
    kelime = request.form.get("kelime")
    ceviri = request.form.get("ceviri")
    db.execute("INSERT INTO words (kelime, ceviri) VALUES (?,?)", kelime, ceviri)
    return redirect("/")
  else:
    words = db.execute("SELECT * FROM words")
    return render_template("index.html", words=words)

# 新增删除路由配置
@app.route("/delete/<int:id>", methods=["POST"])
def delete(id):
    db.execute("DELETE FROM words WHERE id = ?", id)
    return redirect("/")

第二步：修改前端index.html的按钮部分 #

不用写JS，直接把删除按钮包在表单里，点击提交就触发删除请求，对新手最友好：

<td>
    <form action="/delete/{{ word.id }}" method="POST" style="display:inline;">
        <button class="btn btn-primary" type="submit">Delete</button>
    </form>
</td>

提示：style="display:inline;"是为了让表单不会独占一行，保持按钮在表格里的正常排版

验证方法 #

修改完重启Flask服务，点击删除按钮，页面会自动刷新，对应行就会被删除。如果还是有问题，可以按F12打开浏览器控制台，看「网络」标签页里的请求有没有报错，就能快速定位问题。

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