html - 如何使用 node.js(搜索)并将特定数据(按 id)加载到动态创建的行中

Question

首先，我将在 HTML 动态表格中创建一个新行。我使用 JavaScript 在表中创建和删除行。插入行后，我想按用户请求的 ID 进行搜索，然后相应地加载一些数据。例如名称和价格。然后他将能够量化和/或添加更多行(项目)。最后保存为订单。

router.get:

router.get('/searching', function(req,res){
    var sql = req.query.sku;
//call MySQL Query. and //extract key using req.query.key
    db.query('SELECT * FROM item_new WHERE sku= '+sql,
    function(err, rows, fields) {
      if (err) throw err;
      console.log(rows);
      res.json(rows[0]);
    });
});

HTML 页面

<form id="filterForm" action="/user/searching" method="GET">
<input id="filter" class="typeahead tt-query" spellcheck="false" autocomplete="off" name="sku" type="text" placeholder="type Sku">
<input type="submit">
</form>

但是我想在索引页面上显示结果，并且我不想在提交时转到新页面。

Answer 1

我建议使用 div 而不是 form

<div id="filterForm"><input id="filter" class="typeahead tt-query" spellcheck="false" autocomplete="off" name="sku" type="text" placeholder="type Sku"><input id="submitBtn" type="submit"></div></td>

下一个显示带有一些 id= 的结果的单元格:

<td id='itemName'></td>

我知道这不是最好的解决方案，但它至少应该有效(脚本)

let buttons = document.querySelectorAll('#submitBtn');
  for (let button of buttons) {
    button.addEventListener('click', async function(e) {
      let sku = e.target.closest('tr').querySelector('#filter').value;
      let item = await fetch('http://localhost:3000/user/searching?sku='+sku);
      item = await item.json();
      console.log(item.item_name);
      e.target.closest('tr').querySelector('#itemName').textContent = item.item_name;