#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 используй это.