如何使用EJS将MongoDB数据传递至Bootstrap模态框？

我之前做Express后台的时候也碰到过一模一样的需求，单模态框复用编辑表单确实比新开页面友好太多了！这里给你两种实用方案，你可以根据自己的场景选：

方案一：用Data属性预存数据（简单快捷） #

这种方式不用额外写后端接口，直接把分类数据存在Edit按钮的data属性里，点击时用JS读取填充模态框就行：

1. 修改列表中的Edit按钮 #

把当前分类的ID、标题、图片信息都存在按钮的data属性中：

<td>
  <a type="button" data-toggle="modal" data-target="#editCategory" 
     data-category-id="<%= cats._id %>" 
     data-category-title="<%= cats.title %>"
     data-category-image="<%= cats.image %>"
     class="edit-category-btn">Edit</a>
</td>

2. 监听模态框显示事件，自动填充数据 #

给模态框绑定Bootstrap的show.bs.modal事件（这个事件会在模态框即将弹出时触发），然后读取按钮的data属性值，把数据填到表单里：

// 确保页面已经引入jQuery（Bootstrap模态框依赖它）
$('#editCategory').on('show.bs.modal', function (event) {
  // 获取触发模态框的那个Edit按钮
  const triggerBtn = $(event.relatedTarget);
  // 从按钮的data属性里取出分类数据
  const cateId = triggerBtn.data('category-id');
  const cateTitle = triggerBtn.data('category-title');
  const cateImage = triggerBtn.data('category-image');
  
  const modal = $(this);
  // 填充标题输入框
  modal.find('input[name="title"]').val(cateTitle);
  // 修正表单的action路径（注意你原来的代码里拼错了：edit-cateory → edit-category）
  modal.find('form').attr('action', `/admin/categories/edit-category/${cateId}`);
  // 如果有图片，显示预览图
  if (cateImage) {
    modal.find('.imgPreview').attr('src', cateImage).show();
  } else {
    modal.find('.imgPreview').hide();
  }
});

这个方案的好处是零额外后端代码，适合数据量小、不需要实时拉取最新数据的场景。

方案二：用AJAX实时从数据库拉取数据（更安全灵活） #

如果分类数据比较复杂，或者你担心把数据暴露在前端HTML里有风险，可以用AJAX在点击按钮时再从后端获取最新数据：

1. 修改Edit按钮（只需要存ID就行） #

<td>
  <a type="button" data-toggle="modal" data-target="#editCategory" 
     data-category-id="<%= cats._id %>"
     class="edit-category-btn">Edit</a>
</td>

2. 后端添加获取单个分类的接口 #

假设你已经定义了Category模型，添加一个GET路由用来返回指定ID的分类数据：

const Category = require('../models/Category'); // 替换成你的分类模型路径

// 获取单个分类数据的接口
router.get('/admin/categories/get-category/:id', async (req, res) => {
  try {
    const category = await Category.findById(req.params.id);
    res.json(category); // 返回JSON格式的分类数据
  } catch (err) {
    res.status(500).json({ message: '获取分类数据失败：' + err.message });
  }
});

3. 用AJAX请求数据并填充模态框 #

$('#editCategory').on('show.bs.modal', function (event) {
  const triggerBtn = $(event.relatedTarget);
  const cateId = triggerBtn.data('category-id');
  const modal = $(this);

  // 发送AJAX请求到后端获取数据
  $.get(`/admin/categories/get-category/${cateId}`, (data) => {
    // 填充表单内容
    modal.find('input[name="title"]').val(data.title);
    modal.find('form').attr('action', `/admin/categories/edit-category/${data._id}`);
    // 处理图片预览
    if (data.image) {
      modal.find('.imgPreview').attr('src', data.image).show();
    } else {
      modal.find('.imgPreview').hide();
    }
  }).fail(() => {
    alert('获取分类数据失败，请重试');
  });
});

这个方案的优势是数据实时性强，而且不会把敏感数据暴露在前端，适合数据复杂的场景。

最后提醒你一下：你原来的表单action属性里拼写错误了（edit-cateory少了个字母g），记得改成edit-category，不然提交表单时会找不到对应的路由哦！

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