在Express、Node和Javascript中無法連接前端和后端 -有解無憂

感謝您抽出時間來閱讀我的問題。目前我正在使用一個下拉串列，使用 "select "標簽供用戶選擇，但在以下方面完全被卡住了。

如果有任何幫助，我們將不勝感激。

我使用的Handlebar模板如下。

<div class="容器中心">
  <div class=" row">
  <h3 class="flow-text"/span>> 搜索你可以交換的物品</h3> 
  <div class="col s12"/span>>
    <label>按類別搜索</label>/span>
  < select id="category"/span> class="browser-default" onchange="getItems()" > 
    < option value="" disabled selected>  我正在尋找。 ...</option>我正在尋找。
    <option value="2"/span>> 蔬菜</option>
    <option value="3"/span>> Clothes</option>
    <option value="4"/span>> 水果</option>。
    <option value="1"/span>> Other</option>
  </select>/span>
  </div>/span>
</div>/span>

<div class="row"/span>>

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

</div>

</div>>

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

在改變選擇時，javascript會在/js/searchItems.js中運行一個名為get items的函式。我通過一個簡單的警報來檢查該腳本是否被鏈接。在我把實際的功能代碼放進去之前，這些警報的每一個變化都是有效的。

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"/span>)。
    } else {
      console.log("錯誤")。
    }
  };

而在后臺，我們撰寫了以下路由，通過使用從下拉串列的選項值中獲取的這個類別ID來獲取專案。

router.get('/items/:category'/span>, 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) =>/span> item. get({ plain: true })。
    
      res.render('search', { 
          editedItems, 
          logged_in: req.session.logged_in。
    });
  } catch (err) {
    res.status(500).json（err）。
  }
});

同一路由檔案中的所有其他路由都按預期作業。我試著用Insomina Core來模擬這個路由，它按照我的預期渲染了頁面。

。

但是在localhost，所有其他的頁面和功能都正常作業。但是，當我改變下拉串列中的選項時（根據下面的截圖），與類別相關的專案將不會出現。

但它給出了 "respose ok"----------------看控制臺如下。

我正在使用handlebars作為模板引擎，Express服務器，MySQL和Nodejs.

。

如果有任何支持，我們將非常感激。非常感謝。

uj5u.com熱心網友回復：

你混淆了兩種型別的HTTP請求。一個XMLHttpRequest（AJAX）和一個普通的HTTP請求。

你正在使用ajax進行呼叫，但你從服務器上進行回應，就好像它是一個普通的頁面視圖。通常，在Express中，你會使用response.send([body])或使用其中一種方便的方法來回應ajax請求，例如response.json([body])。這些方法通常以某種方式格式化回應體和/或添加一些頭檔案，但它們從根本上說都是一樣的。我強烈建議你瀏覽鏈接的頁面，以幫助你理解。

你的瀏覽器通過將它們渲染成一個頁面來處理 "正常的 "http請求。但是你的 ajax lib，（在本例中為 fetch）獲得了回應，卻沒有做任何處理。通常情況下，你會撰寫一些 JavaScript 來處理回應，即決議正文并以某種方式操作頁面。

然而，由于您回傳的是 HTML 而不是 JSON，您可以將這個 HTML 注入頁面的某個部分。參見innerHTML。但這可以說是一種古老的方式，我建議讓你的初始模板純粹通過JavaScript進行操作。

uj5u.com熱心網友回復：

你似乎沒有對來自searchByCategory函式的回應做任何事情，而且它是一個異步函式，你沒有等待它，所以也許那里有什么東西。

不知道這些代碼是否有效，我想從ui開始一步一步地進行；

我想從ui開始。

是否呼叫過getItems()
它是否像你期望的那樣得到categoryId
是否達到了searchByCategory()，并且它是否作出了正確的反應
我對 express-handlebars 框架不是很熟悉，但如果你可以的話，我建議簡化后端。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/310200.html

標籤：

上一篇：QtQWebEngine-與HTML<a>錨一起作業

下一篇：使用python讀取csv檔案并將內容存盤在陣列中