如何使用 fetch 将按钮的名称或 ID 传递给 Node

Question

我有一个表，其中填充了数据库中的项目，我希望在每一行中都有一个按钮，用于从数据库中删除该项目。我的方法是为按钮提供与将要删除的特定数据相同的 ID/名称，但我不知道如何将该 ID 传递给节点，以便它知道要删除的确切项目。我在 js 中使用 fetch 来使用该按钮进行 POST。

我使用 node 和 express，我使用 ejs 作为我的模板解决方案。我的数据库是 mongodb 和 mongoose。

这是一个按钮，它是为数据库中的每个项目生成的，它与数据库中的项目具有相同的 id。

<button class="delete-button" id='<%= item._id %>'>X</button>

这是获取。整个事情都在 forEach 中为每个按钮添加监听器

button.addEventListener('click', () => {
    fetch('/delete', { method: 'POST' })
      .then(function (response) {
        if (response.ok) {
          console.log('Delete was recorded')
          return
        }
        throw new Error('Request failed.')
      })
      .catch(function (error) {
        console.log(error)
      })
  })

这是节点中的 app.post。

app.post('/delete', (req,res)=>{
    console.log("Deleted button has been clicked")
})

这很好用，但我不知道如何将 id 传递给节点。

提前谢谢你

Answer 1

在 ejs 文件中： 这进入了 forEach 循环

<form class="pull-right" action="/item/<%= item._id %>?_method=DELETE" method="POST">
    <input type="submit" class="btn btn-xs btn-danger" value="Delete">
</form>

（需要安装method-override库：npm install method-override --save）

这里是服务器端：

var express = require("express"),
    app = express(),
    bodyParser = require("body-parser"),
    mongoose = require("mongoose"),
    methodOverride = require("method-override");

app.use(methodOverride("_method"));

app.delete("/item/:id", function(req, res){
    <item list in MongoDB>.findByIdAndRemove(req.params.id, function(err){
        if(err){
            res.send(err);
        }else{
            res.redirect("/<index(ejs) page>");
        }
    });
});

Answer 2

您需要在 javascript 代码中将 id 添加到删除 url，如下所示： （我还将方法 POST 更改为 DELETE，因为遵循休息约定很好）

button.addEventListener('click', () => {
    fetch('/delete/'+this.id, { method: 'DELETE' })
      .then(function (response) {
        if (response.ok) {
          console.log('Delete was recorded')
          return
        }
        throw new Error('Request failed.')
      })
      .catch(function (error) {
        console.log(error)
      })
  })

要在 api 端获取 id，您可以使用 req.params.id

app.delete('/delete/:id', (req,res)=>{
    console.log(req.params.id);
    console.log("Deleted button has been clicked")
})

Answer 3

您可以使用 onclick 并将您的值作为参数传递：

<button class="delete-button" onclick="deleting(<%= item._id %>)">X</button>
function deleting(value){
fetch('/delete', { method: 'POST', data: {buttonId: value} })
  .then(function (response) {
    if (response.ok) {
      console.log('Delete was recorded')
      return
    }
    throw new Error('Request failed.')
  })
  .catch(function (error) {
    console.log(error)
  })

}

在服务器端：

app.post('/delete', (req,res)=>{
console.log("Deleted button has been clicked: "+ req.body.buttonId)
})

我猜你安装了body-parser？