Node.js+Express+EJS下拉选框onChange向服务器传参失败求助

可行方案（超链接列表实现） #

通过无序列表超链接结合req.params传递参数的代码可正常工作，能正确渲染table.ejs并展示数据：

db.ejs 代码 #

<ul>
    <% dbTitle.forEach(function(dbTitle){ %>
       <li><a href="/db/<%= dbTitle.dbTitle %>"><%= dbTitle.dbTitle %></a></li>
    <% }) %>
</ul>

server.js 代码 #

app.get('/db/:dbTitle', async (req, res) => {
  const {dbTitle} = req.params;
  console.log(dbTitle);
  try {
const tabTitleResult = await session.run(`MATCH (db:Database {Title: $dbTitle})-->(t:Table)-->(tv:TableVersion)
Where NOT (tv)<--(:InformationAsset)
RETURN  db.Title as dbTitle, tv.Title as tabTitle Order By db.Title, tv.Title ASC`, {dbTitle}); 

const tabTitleArr = tabTitleResult.records.map(({_fields}) => {
   return {dbTitle:_fields[0],tabTitle:_fields[1]};
});
    res.render('table.ejs', { tabTitle: tabTitleArr});
    //console.log(tabTitleArr)
  } catch(e) {
    console.log("Something went wrong", e)
  }
});

问题场景与错误代码 #

尝试改用下拉选择框替代超链接列表，通过表单select传递参数时失败：选择选项后页面报错Cannot POST /table，且console.log(dbTitle)无输出，参数未成功传递到服务器。

错误的 db.ejs 代码 #

<form method="post" action="/db">
<label>Database Name</label><br>
   <select name="dbTitle" onchange="this.form.submit();">
      <option selected disabled> -- select an option --
         <% dbTitle.forEach(function(dbTitle){ %>
            <option name="dbTitle" value="<%= dbTitle.dbTitle %>"><%= dbTitle.dbTitle %></option>
         <% }) %>
      </option>
   </select>
</form>

注：嵌套<option>是为了强制默认选项显示在首位，曾多次添加name="dbTitle"尝试修复（实际仅需在<select>上设置）；尝试通过value="<%= dbTitle.dbTitle %>"传递变量。

错误的 server.js 代码 #

app.post('/db/:dbTitle', async (req, res) => {
  const {dbTitle} = req.body;
  console.log(dbTitle);
  try {
const tabTitleResult = await session.run(`MATCH (db:Database {Title: $dbTitle})-->(t:Table)-->(tv:TableVersion)
Where NOT (tv)<--(:InformationAsset)
RETURN  db.Title as dbTitle, tv.Title as tabTitle Order By db.Title, tv.Title ASC`, {dbTitle}); 

const tabTitleArr = tabTitleResult.records.map(({_fields}) => {
   return {dbTitle:_fields[0],tabTitle:_fields[1]};
});
    res.render('table.ejs', { tabTitle: tabTitleArr});
    //console.log(tabTitleArr)
  } catch(e) {
    console.log("Something went wrong", e)
  }
});

问题修复方案 #

1. 修正表单与路由的匹配关系 #

表单action设为/db，后端无需在路由路径中添加:dbTitle，因为参数通过req.body传递，而非URL路径。同时确保已配置表单解析中间件（否则req.body会为undefined）：

// 先添加表单解析中间件
app.use(express.urlencoded({ extended: true }));

// 修改POST路由为不带路径参数的形式
app.post('/db', async (req, res) => {
  const {dbTitle} = req.body;
  if (!dbTitle) {
    return res.send('请选择一个数据库');
  }
  console.log(dbTitle);
  try {
const tabTitleResult = await session.run(`MATCH (db:Database {Title: $dbTitle})-->(t:Table)-->(tv:TableVersion)
Where NOT (tv)<--(:InformationAsset)
RETURN  db.Title as dbTitle, tv.Title as tabTitle Order By db.Title, tv.Title ASC`, {dbTitle}); 

const tabTitleArr = tabTitleResult.records.map(({_fields}) => {
   return {dbTitle:_fields[0],tabTitle:_fields[1]};
});
    res.render('table.ejs', { tabTitle: tabTitleArr});
  } catch(e) {
    console.log("Something went wrong", e);
    res.status(500).send('服务器出错');
  }
});

2. 修复无效的HTML结构 #

嵌套<option>是无效写法，默认选项需单独定义，同时避免循环变量名与外部数组名重复：

<form method="post" action="/db">
<label>Database Name</label><br>
   <select name="dbTitle" onchange="this.form.submit();">
      <option selected disabled> -- select an option --</option>
      <% dbTitle.forEach(function(dbItem){ %>
         <option value="<%= dbItem.dbTitle %>"><%= dbItem.dbTitle %></option>
      <% }) %>
   </select>
</form>

3. 排查Cannot POST /table报错 #

该错误说明表单实际提交到了/table路径，需检查是否有其他代码修改了表单action，或清理浏览器缓存确保表单配置生效。

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