javascript - 在node.js + Express中实现依赖选择列表

Question

我是 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);
            }
        });
    });

并将用于对居民数据库进行数据库调用的值发送。

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() ，整个页面都会重新加载。有没有办法实现这个目标？

Answer 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 插入到页面中的正确位置即可。如果只是进入另一个下拉列表，那么这可能没有意义，因为仅对单个下拉列表使用模板引擎没有什么值(value)，但如果生成的 HTML 包含大量 HTML(描述、列等...)，那么您可能希望使用模板引擎来创建它，而不是在 Javascript 中手动创建它。这实际上完全取决于所需的 HTML 结果(您尚未与我们分享的内容)。