嘗試使用Express.js和Jade從MongoDB數據庫中刪除條目

Question

我創建了一個添加和刪除“案例研究”的應用。 我能夠輕松添加條目，但是當我嘗試刪除條目時，將重定向到表單頁面，並將表單操作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存儲庫的鏈接：

https://hidden-wave-1121.herokuapp.com/form

https://github.com/hlmurray/express-app

這里的任何幫助將是巨大的，謝謝！

Answer 1

您可以使用javascript http請求而不是表單發布/提交，並在您的刪除按鈕上使用onclick函數對其進行連線，這是一個涵蓋http請求的StackOverflow問題。

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代替了標准提交，這可以防止頁面更改。

希望對您有所幫助，讓我知道是否可以添加其他內容，然后我將更新答案。