如何使用NodeJS、Express和Mongoose实现点击按钮时GET方法读取带参数URL

你当前的问题核心是表单GET提交的参数格式和路由匹配规则不匹配：

• form表单默认GET提交时，选中的城市会以查询参数（Query String）的形式拼在URL末尾，格式为?city=xxx，此时URL的路径部分仍然是/，不会匹配你定义的/:city路由规则，所以请求只会进入首页路由渲染index.ejs，不会触发表格渲染逻辑。

方案1：修改路由适配默认表单提交（推荐，改动量小） #

直接在首页路由中读取查询参数，判断是否需要渲染表格：

// 原有的/:city路由可删除
router.get("/", function(req, res){
  // 读取GET提交的查询参数
  const selectedCity = req.query.city;
  // 如果存在有效城市参数
  if (selectedCity && selectedCity !== 'Select a city...') {
    CityModel.find()
      .then(result => {
        res.render('table', {vaccines:result});
      })
      .catch(err => {
        res.status(500).send({message: "Cannot display data!"});
        console.log(err);
      })
    return;
  }
  // 无参数时渲染首页
  res.render('index');
});

方案2：保留路由参数规则，拦截表单提交手动跳转 #

如果你需要保持/城市名的URL格式，就用JS拦截默认表单提交，手动构造路由路径跳转：
在index.ejs的末尾添加如下JS代码：

<script>
document.querySelector('form').addEventListener('submit', function(e) {
  // 阻止默认的表单提交行为
  e.preventDefault();
  const city = document.getElementById('selectCity').value;
  if (city && city !== 'Select a city...') {
    // 编码中文/空格后跳转到对应路由
    window.location.href = `/${encodeURIComponent(city)}`;
  }
})
</script>

这种方式就可以正常匹配你原有写的router.get("/:city")路由逻辑。

后续需要按城市过滤数据时，只需要把CityModel.find()修改为CityModel.find({你数据库中城市对应的字段名: city})即可。

内容的提问来源于stack exchange，提问作者astra.xvi