在 node.js + express 中实现依赖选项列表答案

【问题标题】：Implementing dependent picklist in node.js + express在 node.js + express 中实现依赖选项列表
【发布时间】：2016-03-06 16:12:20
【问题描述】：

我是 node.js 和 express 的新手。我正在编写一个 node.js 应用程序，它使用 express 和 express-handlebars 作为我的模板框架。我想实现一个依赖选项列表，它将根据另一个选项列表的选定值呈现。

到目前为止，这是我所拥有的：

这是我的父选项列表

<select id="buildingsSelect" class="building-select-add "name="residentBuildings">
     {{#each buildingRows}}
         <option value="{{idBuildings}}" name={{Name}}>{{Name}}</option>
     {{/each}}
 </select>

当用户选择一个建筑物时，我发出一个ajax请求，

$('.building-select-add').change(function(){
        var buildingId = $('.building-select-add').val();
        $.ajax({
            type: 'post',
            url: '/resident_add/' + buildingId,
            success: function(data) {
                location.reload();
            },
            error: function(err) {
                console.log('------------ Error while updating this resident: ' + err);
                console.log('------------ Error while updating this resident: ' + err.message);
            }
        });
    });

并将用于进行数据库调用的值发送到 Residents 数据库。

router.post('/:buildingId', function(req, res){
  var buildingId = req.params.buildingId;
  console.log('OOOOOO buildingId: ' + buildingId);
  var resList = [];

  connection.query('select idResidents, Name from Residents where BuildingId = ?', buildingId, function(err, rows){
    if (err) {
      console.log('----------------------- ERROR: Error querying records - ' + err);
      console.log('----------------------- ERROR: ' + err.message);
      return err;
    }
    resList = rows;
  });
});

我希望居民显示在另一个选择中，但我无法填充它。

如何在页面上呈现选择？如果我在 ajax 中执行 location.reload() ，则会重新加载整个页面。有没有办法做到这一点？

【问题讨论】：

标签： javascript ajax node.js express handlebars.js

【解决方案1】：

通常，您要做的是发出一个返回一些 JSON 的 Ajax 请求。然后，当浏览器 Javascript 接收到 JSON 时，它会将其解析为 Javascript 对象或数组，然后您使用这些结果直接操作 DOM 以将它们插入到页面中的列表中。

根据您想要的显示，您可以将该列表插入到页面上的现有元素中，或者您正在创建一个新列表并将其插入到页面中。关键是您正在获取 Ajax 调用的 JSON 结果并使用客户端 Javascript 执行此操作。

在 Ajax 调用之后，您没有显示所需的 HTML 结果，因此我无法准确显示如何实现该结果，但您无需执行reload()，而是从 Ajax 调用中获取 JSON 结果（jQuery 已经为您解析为 Javascript 对象），您将对其进行迭代并根据需要将其插入到 DOM 中。

    $('.building-select-add').change(function(){
        var buildingId = $('.building-select-add').val();
        $.ajax({
            type: 'post',
            url: '/resident_add/' + buildingId,
            success: function(data) {
                // use the data result here to insert into a picklist
                // in the current page
            },
            error: function(err) {
                console.log('------------ Error while updating this resident: ' + err);
                console.log('------------ Error while updating this resident: ' + err.message);
            }
        });
    });

我不太确定您想从 Ajax 调用中返回什么数据，但它看起来像这样：

router.post('/:buildingId', function(req, res){
  var buildingId = req.params.buildingId;
  console.log('OOOOOO buildingId: ' + buildingId);

  connection.query('select idResidents, Name from Residents where BuildingId = ?', buildingId, function(err, rows){
    if (err) {
      console.log('----------------------- ERROR: Error querying records - ' + err);
      console.log('----------------------- ERROR: ' + err.message);
      return err;
    }
    res.json(rows);
  });
});

还有其他方法可以做到这一点。 ajax 调用的结果可能是一个呈现的 HTML 模板，您只需将该 HTML 插入页面中的正确位置。如果它只是进入另一个下拉列表，那么这可能没有意义，因为仅将模板引擎用于单个下拉列表几乎没有价值，但如果生成的 HTML 包含大量 HTML（描述，列等...），那么您可能希望使用模板引擎来创建它，而不是在 Javascript 中手动创建它。这完全取决于所需的 HTML 结果是什么样的（您尚未与我们分享的内容）。

【讨论】：