时间戳

首页 > 解决方案 > 使用 ajax 理解前端删除

javascript - 使用 ajax 理解前端删除

问题描述

我正在使用前端RESTful API，并且在使用andCRUD时遇到了问题。DELETEPUT

我知道该怎么做GET，POST我有一个发布数据，如果格式无效forms.html，我的 ajax GET`` 调用几乎会重新加载localhost:3000/submit/（我的页面）。form.html

我的麻烦是，我的前端表格中有一个删除按钮（每行一个，用 javascript 创建），我不知道怎么说“onClick，删除这一行”。我的后端有一个 app.delete 路由，它的工作原理是这样的：localhost:3000/pokemon/del/7例如，将删除第 7 个条目。/del/8 将删除第 8 个等。我可以查看一些文档或建议吗？

我最好的猜测是：在 JS 中，创建一个循环遍历每个按钮并设置属性 ("id", "delButton" + j) 其中 j 是 for 循环中的 var。现在我有 6 个删除按钮，id 分别为 delButton1、delButton2、delButton3 等。onClick, ajax 使用 url 删除：“ http://localhost:3000/pokemon/del/ ” + j 其中 j 是按钮 ID 中的任何数字。我觉得类似的东西会起作用，但除此之外，我不确定。

标签： javascriptajaxhttp-delete

解决方案

可能有大约 100 种方法可以做到这一点，所以这个问题可能会被关闭，因为 Stack Overflow 更喜欢非常明确的意见和解决方案，但我会把它扔进去让你开始。

你可能根本不远。一种更好的方法可能是在创建行时对其进行编号，并使用类似的东西，data-row-id这样它就不会干扰实际的 ID，因为1整个页面上的 ID 可能会在以后引起问题。

然后只需向每一行添加一个删除按钮，并使用一个动作，它会使其父级data-row-id执行DELETE请求，然后在成功时删除该行。

如果您要走这条路，我会考虑研究 Vue 或 React 之类的东西，因为它们将视图和数据链接在一起，因此表格将成为数据的视图——当从数据中删除某些内容时，视图会自动更新。

推荐阅读