Question

我是node.js的新手并表达。我正在编写一个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（），则会重新加载整个页面。有没有办法实现这个目标？

Answer 1

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

根据您所需的显示，您要么将该列表插入页面上的现有元素，要么创建新列表并将其插入页面。关键是您正在使用Ajax调用的JSON结果并使用客户端Javascript执行此操作。

在Ajax调用之后，您没有显示所需的HTML结果是什么，所以我无法准确显示如何实现这一点，但是您只需从reload()获取JSON结果Ajax调用（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结果（您尚未与我们分享的内容）。

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

1 个答案: