Question

我正在使用前端CRUD RESTful API，而我在使用DELETE和PUT时遇到了问题。

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

我的麻烦是，我的前端表中有一个删除按钮（每行一个，用javascript创建），我不知道怎么说＆＃34; onClick，删除这一行＆＃34; 。我的后端有一个app.delete路由，它的工作原理如下：form.html会删除第7个条目。 / del / 8会删除第8个等等。我能看到一些文档或建议吗？

我最好的猜测是：在JS中，创建一个for循环，循环遍历每个按钮并设置属性（＆＃34; id＆＃34;，＆＃34; delButton＆＃34; + j）其中j是for循环中的var。现在我有6个删除按钮，其中包含id＆＃39; s delButton1，delButton2，delButton3等等。 onClick，ajax delete with url：＆＃34; http://localhost:3000/pokemon/del/＆＃34; + j其中j是按钮ID中的数字。我觉得这样的东西会起作用，但除此之外，我不确定。

Answer 1

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

你可能并不遥远。更好的方法可能是在创建行时对行进行编号，并使用类似data-row-id的内容，这样就不会影响实际ID，因为1作为整个页面上的ID可能会在以后引起问题。

然后只需为每一行添加一个删除按钮，其操作将使其父级data-row-id执行DELETE请求，然后在成功时删除该行。

如果你要走这条路，我会考虑查看像Vue或React这样的东西，因为它们将视图和数据链接在一起，这样表格就可以看到数据 - 当某些内容从数据，视图会自动更新。

Answer 2

我是否理解在Ajax调用之后您只需删除表中的相关行？

如果是这样，那么你可以将按钮DOM元素链接传递给你的onClick函数

jsFiddle

    function deleteRow(el) {
        //do Ajax call
        $.post('/delete',function(){
            $(el).parents('tr').remove();
        }).always(function(){
            $(el).parents('tr').remove();
        })

    }

使用ajax

2 个答案: