Блог

Главная - Вопросы по программированию - Отправить ответ со стороны обслуживания на сторону клиента (Node.js , javascript)

Отправить ответ со стороны обслуживания на сторону клиента (Node.js , javascript)

#javascript #node.js #fetch #single-page-application

#javascript #node.js #выборка #одностраничное приложение

Вопрос:

Основываясь на приведенной ниже структуре, я хочу отправить свой ответ (простой массив [«Tom», «Bob», «Sam»]) из server.js чтобы index.js Возможно ли это?

server.js

 app.get("/*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "frontend", "index.html"));
});

app.post('/settings', function(req, res, next){
res.status(200).json({
                ok: true,
                data: ["Tom", "Bob", "Sam"]
            }); 
});

app.listen(process.env.PORT || 3000);

frontend/index.html

     <nav class="nav">
        <a href="/">Dashboard</a>
        <a href="/settings">Settings</a>
    </nav>
    <div id="app"></div>
    <script type="module" src="/static/js/index.js"></script>

/frontend/static/js/index.js

 document.querySelector("#app").innerHTML = await view.getHtml(); // load page.html
//console.log(data);

/frontend/static/html/page.html

         <button id="btn">Save</button>
       <script>
     
   var btn = document.getElementById("btn");
btn.addEventListener("click", function() {

  fetch('/settings', {
    method: 'POST', 
           headers: {
            "Content-Type": "text/plain"
        },
    body: JSON.stringify(anotherData), 
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(response => response.json())
    .then(function(response) {
        if (response.ok) {
            console.log('got data: ', response.data);
        }
    }).catch(function(error) {
        console.log(error);
    });
  

}, false);
   </script>

Комментарии:

1. Вы использовали fetch() раньше? Это часть ваших тегов, так что покажите нам, что вы пробовали

2. Вас также может заинтересовать res.json()

3. С какой проблемой вы столкнулись? Вы уже делаете запрос к /settings API вашего сервера узла и отправляете обратно объект с { ok, data} . Ваш объект ответа должен иметь свойство .data, содержащее ваш массив. Что вы ожидаете / хотите, чтобы здесь произошло?

4. @Evert Я обновил свой пост (добавил этот html в свой первоначальный запрос POST). Я могу получить свой простой массив там, но все еще не знаю, как получить доступ к моим результирующим данным в index.js досье. Возможно ли это?

5. @Joseph Я могу получить свой простой массив в моем html, но все еще не знаю, как отправить мои результирующие данные в index.js досье. Возможно ли это?

Ответ №1:

Спасибо за комментарий — я полагаю, что понимаю, о чем вы просите сейчас.

Если вы хотите получить данные в вашем index.js файл, лучший способ справиться с этим, вероятно, состоит в том, чтобы переместить код вашего запроса в index.js . Удалите тег из вашего page.html файл и вместо этого поместите его в index.js . Код в index.js будет запускаться после загрузки страницы, аналогично тому, что происходит в скрипте страницы.

Вам нужно будет дождаться завершения выборки, прежде чем что-либо делать с полученными данными, но если вы переместите выборку в свой index.js вы можете вызывать другие функции в файле с данными или, в качестве альтернативы, объявлять переменную вне вашего вызова выборки, чтобы другие функции в вашем index.js используй это.