问题描述
我创建了一个添加和删除“案例研究”的应用。 我能够轻松添加条目，但是当我尝试删除条目时，将重定向到表单页面，并将表单操作URL追加到末尾。 实际上，当我返回原始表单页面时，该条目确实会被删除，但是理想情况下，我希望能够与添加/删除条目保持在同一页面上。
form.jade
form(method="POST", action="/form/#{entry._id}?_method=DELETE")
input(type="submit", value="Delete")
form.js
/* Delete Case Study */
router.delete('/:id', function (req, res) {
Entry.findById(req.params.id)
.exec(function(err, entries) {
// changed `if (err || !doc)` to `if (err || !entries)`
if (err || !entries) {
res.statusCode = 404;
res.send({});
} else {
entries.remove(function(err) {
if (err) {
res.statusCode = 403;
res.send(err);
} else {
res.send('Deleted entry with link: ', entries.link);
}
});
}
});
});
这是我在Heroku上的应用程序以及GitHub存储库的链接：
这里的任何帮助将是巨大的，谢谢！
1楼
您可以使用javascript http请求而不是表单发布/提交，并在您的删除按钮上使用onclick函数对其进行连线，这是一个涵盖http请求的问题。
input(type="button", onclick="deleteItem({entry._id})")
function deleteItem(theID)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "DELETE", '/form/'+ theID, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
同样，您似乎需要在form.js中更新路由，以使其读取/ forms /：id。
但是，这不会摆脱页面上的HTML，因此您将需要更多的JavaScript来删除该DOM元素。 通常，当我使用MEAN堆栈时，我会使用Angular $ http方法完成所有表单发布和调用，这样您就不会进行任何页面更改。 我仍然使用表单，但是我使用ng-submit代替了标准提交，这可以防止页面更改。
希望对您有所帮助，让我知道是否可以添加其他内容，然后我将更新答案。