如何将 html 格式的数据从节点 js 服务器附加到客户端的 html 文件？

Question

我正在尝试用普通的 javascript、节点和把手构建一个网站，通过报价计算器，用户可以向网站所有者请求几个项目的列表。 json格式的数据如：

{ "item": "candy", "brand":"delicious candy" }

将由用户在 index.html 中插入。 然后该站点将执行一些验证，然后通过附加到按钮中事件的 fetch api 将其发送到服务器，例如“发送报价”

app.post('/api', (request, response) => {
let quote = request.body;
response.render('admin', quote);

然后HandleBars会在html中插入数据如：

<h1> Candy </h1>
<h2> Delicious candy </h2>

这就是我卡住的地方，我能够在控制台中可视化 api 调用的响应，并且显然正在将我想要的数据发送回浏览器，但我不知道怎么可能我将此 HTML 附加到一个名为 admin.html 的 HTML 文件中。

Answer 1

你对 jQuery 很熟悉吗？你可以做的是在你的 Handlebars HTML 中创建一个空的段落标签。

<p id="candyData">

</p>

然后，在您为表单上的提交按钮添加事件侦听器的 JS 文件中，按 ID 查询段落。

const candyData = document.querySelector('#candyData');

现在，在您获取到服务器的过程中，获取页面的值可能看起来像这样。

fetch('/url').then((response) => {
  response.json().then((data) => {
    if (data.error) {
      candyData.textContent = data.error;
    } else {
      candyData.textContent = data.candyDataObj // candyDataObj should be accessed based on how you're storing the data.
    }
  });
});

别忘了在你的 HTML 文件中加载 script 标签。

<script src="/scripts/app.js"></script> <!-- the src path should be updated per your directory -->