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

Question

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

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

将由用户插入 index.html。然后该站点将执行一些验证，然后通过附加到按钮事件的提取 api 将其发送到服务器，例如 'send quote'

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

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

How to append html formatted data from node js server to html file in client side?

html

javascript

node.js

handlebars.js