無法在Express、Node和Javascript中連接前端和后端

感謝您抽出時(shí)間閱讀我的問題。目前，我正在使用一個(gè)下拉列表，使用“選擇”標(biāo)簽供用戶選擇。并且完全堅(jiān)持以下幾點(diǎn)。localhost，所有其他頁面和函數(shù)正常工作。但無法在Express、Node和Javascript中連接前端和后端

任何幫助都將不勝感激。

我使用的把手模板如下。

<div class="container center">
  <div class="row">
  <h3 class="flow-text">Search for items you can exchange your item with</h3>
  <div class="col s12">
    <label>Search by Category</label>
  <select id="category" class="browser-default" onchange="getItems()">
    <option value="" disabled selected>I am looking for...</option>
    <option value="2">Vegetables</option>
    <option value="3">Clothes</option>
    <option value="4">Fruits</option>
    <option value="1">Other</option>
  </select>
  </div>
</div>

<div class="row">

{{#each editedItems as |i|}}
<div class="col s12 m4">
      <!---->
      <div class="card">
        <div class="card-image">
          <img src="/images/strawberry.jpg">
          <span class="card-title">{{i.title}}</span>
          <a class="btn-floating halfway-fab waves-effect waves-light red" href="/item/{{i.id}}"><i class="material-icons">zoom_in</i></a>
        </div>
        <div class="card-content">
          <p class="truncate">{{i.description}}</p>
        </div>
      </div>
      <!---->
    </div>
{{/each}}

</div>

</div>

<script src="/js/searchItems.js"></script>

在更改選擇時(shí)，javascript將在/js/searchItems.js中運(yùn)行名為get items的函數(shù)。我使用一個(gè)簡單的警報(bào)檢查腳本是否鏈接。在我輸入實(shí)際的功能代碼之前，每更改一次，這些警報(bào)就會起作用。

searchItems.js具有以下代碼。

function getItems() {
    const select = document.getElementById('category');
    let option = select.options[select.selectedIndex];
    let categoryId = option.value;

    searchByCategory(categoryId);
   
}

const searchByCategory = async (categoryId) => {
    const response = await fetch(`/items/${categoryId}`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    });
  
    if (response.ok) {
      console.log("Response ok");
    } else {
      console.log("Error");
    }
  };

在后端，通過使用從下拉列表中的選項(xiàng)值中獲取的類別id來編寫以下路由以獲取項(xiàng)目。

router.get('/items/:category', async (req, res) => {
  try {
      const categoryId = req.params.category;
      const existingItems = await Item.findAll({
      where:{
          category_id : categoryId
      },
      order: [['id','DESC']],
    });
    
      const editedItems = existingItems.map((item) => item.get({ plain: true }));
    
      res.render('search', { 
          editedItems, 
          logged_in: req.session.logged_in 
    });
  } catch (err) {
    res.status(500).json(err);
  }
});

同一路由文件中的所有其他路由正在按預(yù)期工作。我嘗試使用Insomina Core模擬這條路線，它按照我的預(yù)期呈現(xiàn)了頁面。

但是在localhost中，所有其他頁面和函數(shù)都正常工作。但是，當(dāng)我更改下拉列表中的選項(xiàng)時(shí)（根據(jù)下面的屏幕截圖），與類別相關(guān)的項(xiàng)目將不會出現(xiàn)。

但它給出了“respose ok”——查看控制臺，如下所示。

我使用Handlebar作為模板引擎、Express服務(wù)器、MySQL和Nodejs。

任何支持都將不勝感激。非常感謝你。