尝试仅使用 html 按钮将数据传递给烧瓶应用程序

Posted 2023-05-08

【中文标题】尝试仅使用 html 按钮将数据传递给烧瓶应用程序

【英文标题】：Trying to pass data to a flask app with just a html button

【发布时间】：2021-08-15 13:17:45

【问题描述】：

我有一个网页，它显示了一个包含数据库内容的表格，这是用烧瓶和 sqlite3 完成的。

我想在每行旁边添加一个按钮，向烧瓶发送请求以运行例如从我的数据库中删除相应的元素，然后重新加载我的页面。

这是我的html：

% for d in data %
<tr>
  <td> d[0] </td>
  <td> d[1]  </td>
  <td><button class="delete" type="button" id=" d[2] ">DELETE</button></td>
</tr>
% endfor %

其中 d[2] 是数据库中的 id。

所以基本上当一个按钮被按下时，它应该调用一个 python 函数，比如：

@app.route("/delete")
def delete():
   # some code to parse the id
   db.execute('DELETE FROM someTable WHERE id=(?)', id)
   return redirect("/")

然后我想我可以为每个按钮添加一个 eventListener 来监听点击并调用该函数，同时以某种方式将 id 传递给它，例如：

let deletebuttons=document.querySelectorAll(".delete");
      for (let i = 0; i < deletebuttons.length; i++) 
        deletebuttons[i].addEventListener("click", function () 
          $.post("/delete")
        )
      

这是我卡住的地方...根据我对 jQuery 的有限理解，我可以使用 $.post 向烧瓶发送请求并调用我的删除函数，但我不知道如何将数据传递给所述函数寿。我想我可以将我的按钮放在一个表单中，并将 id 作为隐藏值并使用 request.form.get 检索它？我可以在不使用表单的情况下执行此操作吗？

【参考方案1】：

使用一些 javascript 来实现这一点。

// select all buttons
document.querySelector('delete').forEach(each => 
    // for each one, attach an eventlistener of onclick
    each.onclick = () => 
        // send request to your backend delete url
        fetch("http://backendurl/delete", 
            method: "DELETE",
            headers: ...
            body: JSON.stringify(each.id),
        );
    ;
);

并修改您的后端：

from flask import request
@app.route("/delete", methods=["DELETE"])
def delete():
    body = request.json
    db.execute('DELETE FROM someTable WHERE id=(?)', body.id)
    return redirect("/")