使用Express和Mongoose时如何通过POST路由传递多个ID数组实现批量删除

客户端代码修改 #

你原来收集待删除ID数组的逻辑不用动，直接在函数里用原生fetch发JSON格式的POST请求即可，不会暴露参数在URL，也不需要操作表单：

async function deleteMany() {
  const toDelete = []
  // 直接筛选已选中的复选框，省略循环判断逻辑
  const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked')
  checkboxes.forEach(checkbox => toDelete.push(checkbox.value))
  
  if(toDelete.length === 0) {
    alert('请先选择要删除的产品')
    return
  }

  try {
    const res = await fetch('/products/batch-delete', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      // 把ID数组转为JSON字符串放在请求体中传输
      body: JSON.stringify(toDelete)
    })
    if(res.ok) {
      // 删除成功后可根据需求刷新页面，或者手动移除页面上选中的表格行
      location.reload()
    }
  } catch (err) {
    console.error('删除失败：', err)
  }
}

服务端配置与路由处理 #

1. 首先确保你已经在服务端启用了JSON请求体解析中间件，一般在index.js顶部、路由注册前添加这行：

// 只有配置了这个中间件，才能正常解析前端传过来的JSON格式请求体
app.use(express.json())

2. 新增批量删除的路由，直接沿用你之前准备的deleteMany + $in逻辑即可：

app.post('/products/batch-delete', async (req, res) => {
  try {
    // req.body就是前端传过来的ID数组，mongoose会自动把字符串格式的_id转为ObjectId匹配，不需要手动转换
    await Product.deleteMany({
      _id: { $in: req.body }
    })
    res.sendStatus(200)
  } catch (err) {
    console.error(err)
    res.sendStatus(500)
  }
})

对应疑问的明确说明 #

• ID数组的发送与解析：前端把数组转成JSON字符串放在请求体里传输，服务端用express.json()中间件自动解析为JS数组，不需要额外做格式处理
• 无表单发请求：直接用原生fetchAPI即可，所有现代浏览器都支持，不需要引入额外依赖，也不会把参数暴露在URL上

如果要遵循REST规范，也可以把请求方法换成DELETE，前后端对应修改method字段和路由的app.delete即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者Laurie