Как обновить файл e js с помощью fetch? Использование node.js и javascript - PullRequest
0 голосов
/ 04 апреля 2020

Я пытаюсь обновить файл e js. Я пытаюсь просто изменить текст в теге h1 на данные из запроса get, отправленного с fetch. Но ничего не происходит. Если я вписываю путь URL в браузере, все работает нормально, но при использовании fetch сервер получает данные, но на странице ничего не меняется.

Я предполагаю, что это связано с использованием fetch. метод? Это верно? Разве нельзя использовать fetch? Если да, то как ты это делаешь?

Вот мой код:

E js:

<input type="text" id="surveyName" placeholder="Name your survey">
<div id="addQuiz" onclick="newQuiz()">Add</div>
<h1>Survey: <%= data.userQuery %></h1>

Получить запрос на получение:

const newQuiz = () => {
    const name = document.getElementById("surveyName").value

    fetch(`/${name}`)
    .then((data) => {
        alert('sent!')
    })}

Маршрутизация в узле:

app.get("/:userQuery", (req, res) => { 
  console.log(req.params.userQuery)
  res.render('home',{data: {userQuery: req.params.userQuery}}) 
}); 

Ответы [ 2 ]

0 голосов
/ 04 апреля 2020

Посмотрите, работает ли это для вас -
E js:

<input type="text" id="surveyName" placeholder="Name your survey">
<div id="addQuiz" onclick="newQuiz()">Add</div>
<h1 id="some_id">Survey: <%= data.userQuery %></h1>

Запрос получения fetch:

const newQuiz = () => {
    const name = document.getElementById("surveyName").value;

    fetch(`/${name}`)
    .then((data) => {
        alert('sent!');
        document.querySelector("#some_id").innerHTML = data.userQuery;
    })}

Маршрутизация в узле:

app.get("/:userQuery", (req, res) => { 
    res.json({userQuery: req.params.userQuery});
}); 
0 голосов
/ 04 апреля 2020

Если вы хотите загрузить ответ на запрос HTTP как целую новую страницу, тогда не используйте Ajax. Весь смысл Ajax в том, что он делает запрос с JavaScript и делает ответ доступным для JavaScript без перехода к новому использованию.

Использование обычного HTML отправка формы.


Если вы хотите использовать Ajax, тогда вам нужно использовать метод интерфейса тела , чтобы иметь дело с телом ответа, а затем использовать эти данные для манипулировать существующим документом . Если вы сделаете это, вам, вероятно, будет лучше сделать запрос к конечной точке, которая возвращает данные как JSON, а не как те, которые внедряют их в шаблон E JS. Возможно, вы захотите прочитать Руководство MDN по использованию fetch .

...