在Express.js与Node.js中实现URL参数传递至HTML标签及跨EJS文件搜索功能的可行性咨询

首先明确说：你的实现方案完全可行！把搜索表单和结果展示拆分到不同EJS文件的做法非常合理，既符合职责分离的开发思路，也让代码更易于维护——比如搜索表单可以放在网站的公共导航区域，结果页专注处理内容展示，完全适配Express+EJS的开发模式。

不过看你的代码里有几个小问题，导致参数传递和渲染可能不生效，下面帮你一步步梳理修正：

1. 表单提交与路由的匹配问题 #

你当前的表单用GET方法提交到/profiles/username，但路由定义的是/profiles/:username（路径参数），这两者不兼容：

• 当用GET提交表单时，输入的内容默认会以**查询参数（query）**的形式附在URL后（比如/profiles?username=xxx），而不是路由期望的路径参数格式/profiles/xxx。

这里给你两种解决思路：

方式一：用JS动态构建路径参数URL #

拦截表单的默认提交行为，手动构建带路径参数的跳转URL，这样就能匹配你现有的路由：

<!-- 第一个EJS文件的表单（修正了图标标签的语法错误） -->
<form id="userSearchForm">
  <input type="text" placeholder="Search user..." name="username" id="searchInput">
  <button type="submit" class="btn btn-outline-success"><i class="fas fa-search"></i></button>
</form>

<script>
document.getElementById('userSearchForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认表单提交
  const username = document.getElementById('searchInput').value.trim();
  if (username) {
    window.location.href = `/profiles/${username}`; // 跳转到带路径参数的URL
  }
});
</script>

方式二：修改路由接收查询参数 #

如果不想改动前端逻辑，也可以把路由改成接收查询参数，这样直接兼容表单的默认GET提交：

// 路由文件代码
router.get('/profiles', async (req, res) => {
  try {
    const username = req.query.username; // 获取URL中的查询参数
    const allProfiles = await User.find({ username: username });
    // 把需要的数据传给EJS模板
    res.render('profiles', { searchedUsername: username, profiles: allProfiles });
  } catch (err) {
    console.error(err);
    res.status(500).send('服务器出错啦');
  }
});

对应的表单action要改成/profiles：

<form action="/profiles" method="GET">
  <input type="text" placeholder="Search user..." name="username">
  <button type="submit" class="btn btn-outline-success"><i class="fas fa-search"></i></button>
</form>

2. 在EJS中获取URL参数的正确姿势 #

你在第二个EJS里写<%= req.params.username %>是错误的——EJS模板默认无法直接访问req对象，必须在路由渲染时把需要的参数主动传递给模板：

针对路径参数的场景（对应方式一的路由） #

先修改路由，把参数传给模板：

// 路由文件
router.get('/profiles/:username', async (req, res) => {
  try {
    const username = req.params.username;
    const allProfiles = await User.find({ username: username });
    // 将需要的变量注入模板
    res.render('profiles', { searchedUsername: username, profiles: allProfiles });
  } catch (err) {
    console.error(err);
    res.status(500).send('服务器出错啦');
  }
});

然后在EJS模板里直接使用传递过来的变量：

<!-- 第二个EJS文件的展示代码 -->
<h3 class="mt-5">You searched for <%= searchedUsername %></h3>

<!-- 可选：展示查询到的用户列表 -->
<% if (profiles && profiles.length > 0) { %>
  <div class="mt-3">
    <h4>Found users:</h4>
    <ul class="list-group">
      <% profiles.forEach(profile => { %>
        <li class="list-group-item"><%= profile.username %></li>
      <% }) %>
    </ul>
  </div>
<% } else { %>
  <p class="mt-3">No matching users found.</p>
<% } %>

额外提醒 #

• 你的原始表单代码里<i class="fas fa-search</i>有语法错误，少了闭合的引号，已经在上面的示例中修正了。
• 异步操作一定要加错误处理（比如try/catch），避免数据库查询出错导致整个请求崩溃。

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