在node.js + express中實現依賴選擇列表

我是node.js和express的新手。我正在寫一個node.js應用程序，將express和句柄作爲我的模板框架。我想實現一個依賴選擇列表，它將根據另一個選擇列表的選定值進行呈現。在node.js + express中實現依賴選擇列表

到目前爲止，這是我：

這是我的父母選擇列表

<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（），整個頁面都會被重新加載。有沒有辦法做到這一點？

來源

2016-03-06 codeinprogress

通常，您要做的是創建一個返回一些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結果是什麼樣的（你沒有與我們分享的東西）。

來源

2016-03-06 08:05:51 jfriend00

在node.js + express中實現依賴選擇列表

回答

相關問題