Как добавить данные в формате html с узла js server в файл html на стороне клиента? - PullRequest
Новая
       51

Как добавить данные в формате html с узла js server в файл html на стороне клиента?

0 голосов
/ 09 октября 2019

Я пытаюсь создать сайт в виде простого javascript, узла и руля, чтобы с помощью калькулятора цитат пользователь мог запросить список из нескольких элементов для владельца сайта. Данные, отформатированные в формате json, такие как: 

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

, будут вставлены пользователем в index.html. Затем сайт будет выполнять некоторые проверки и затем отправлять их на сервер через 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.

enter image description here

aproximation of data flow

1 Ответ

0 голосов
/ 09 октября 2019

Вы вообще знакомы с jQuery? Что вы можете сделать, это создать пустой тег абзаца в HTML-коде Handlebars. 

<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 -->
...