无法在 Express、Node 和 Javascript 中连接前端和后端

Question

感谢您花时间阅读我的问题。目前，我正在使用一个下拉列表，该列表使用“select”标签供用户从 select 获取。并完全坚持以下几点。本地主机，所有其他页面和功能正常工作。但无法在 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>

在 selection 的更改上 javascript 将运行调用 /js/searchItems.js 中的获取项目的函数。我使用简单的警报检查了脚本是否已链接。在我放置实际功能代码之前，每个更改这些警报都有效。

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"); } };

并且在后端编写了以下路由，以使用从下拉列表中的选项值中获取的类别 ID 来获取项目。

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); } });

同一路由文件中的所有其他路由都按预期工作。我尝试使用 Insomina Core 模拟这条路线，它按照我的预期呈现了页面。

但在本地主机上，所有其他页面和功能都正常工作。但是，当我更改下拉列表中的选项时（如下面的屏幕截图所示），与类别相关的项目不会出现。

但它给出了“respose ok”---如下查看控制台。

我正在使用 handlebars 作为模板引擎、Express 服务器、MySQL 和 Nodejs。

如有任何支持，我们将不胜感激。非常感谢。

Answer 1

你似乎没有对 searchByCategory 函数的响应做任何事情，它也是一个异步函数，你没有等待它，所以也许那里有东西。

不知道任何代码是否有效，我会从 ui;

开始逐步进行

getItems() 曾经被调用过吗
是否像您期望的那样categoryId
是否到达searchByCategory()并且它是否正确响应
我不是很熟悉 express-handlebars 框架，但如果可以的话，我建议您简化后端。

Answer 2

您混淆了两种类型的 HTTP 请求。 XMLHttpRequest (AJAX) 和常规 HTTP 请求。

您正在使用 ajax 进行调用，但您从服务器响应时就好像它是普通页面视图一样。通常，在 Express 中，您会使用 response.send([body]) or by using one of the convenience methods such as response.json([body]) 响应 ajax 请求。这些通常会以某种方式 and/or 添加一些 headers 来格式化响应 body，但它们基本上都是一样的。我强烈建议您浏览链接页面以帮助您理解。

您的浏览器通过将“正常”http 请求呈现为页面来处理它们。但是您的 ajax 库（在本例中为 fetch）正在获取响应，但什么也不做。通常，您会编写一些 JavaScript 来处理响应，即解析 body 并以某种方式操作页面。

但是，由于您要返回 HTML 而不是 JSON，您可以将此 HTML 插入页面的一部分。参见 innerHTML。但这可以说是一种过时的方法，我建议让你的初始模板纯粹被操纵 JavaScript.

无法在 Express、Node 和 Javascript 中连接前端和后端

Cannot connect frontend and backend in Express, Node and Javascript

javascript

backend

node.js

express

express-handlebars