Как отправить JSON в качестве ответа с узла js в HTML-файл

#javascript #node.js #ajax

Вопрос:

Я пытаюсь отправить JSON из узла js в html-файл в качестве ответа, но после отправки HTML-формы исчезает, и появляется сообщение Response после отправки формы. Я пробовал ajax, но он не работает, потому что я перенаправляюсь на это (изображение выше). Я пытаюсь создать простую форму входа в систему, и если пользователь ничего не вводит, то под формой должно отображаться сообщение «Ничего не было введено».

JS-код (node.js , экспресс-фреймворк)

 app.get('/login', function(req, res){
    res.sendFile(path.join(__dirname '/Frontend/html/login.html'));
});

app.post('/login', function(req, res){
    res.json({a: 5});
});

html-код

  <form method="POST">
    <input type = "text" name = "username" id = "username" placeholder="Username">
    <input type = "password" name = "password" id = "password" placeholder="Password">
    <button id = "gumb" type = "submit">Prijavi se</button>
</form>
<p id = "demo"></p>
<script>
    document.getElementById('gumb').addEventListener('click', function(){
        const xhr = new XMLHttpRequest();

        console.log("test");

        if(xhr.readyState == 4 amp;amp; xhr.status == 200){
           document.write(xhr.responseText);
        }
        else{
            console.log("broke");
        }

        xhr.open('get', 'http://localhost:8000/login', true);
    });
</script>

1. Он работает как исключенный. Он возвращает {a: 5} данные JSON при отправке в /login конечную точку.

2. После этого вы не отображаете какой-либо шаблон или перенаправляете его куда угодно.

3. да, но возвращается ли он, как показано на рисунке?

4. Хм, да. Я не понимаю вашего вопроса. На рисунке показаны необработанные данные JSON, отображаемые в вашем браузере.

5. это вопрос, почему он отображает необработанные данные JSON, почему он не отображает форму?

Ответ №1:

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

 app.post('/login', function(req, res){
    res.json({a: 5});
});

Обычно вы хотели бы что-то сделать с данными, отправленными на ваш сервер:

 app.post('/login', function(req, res){
  user= req.body.username;
  password = req.body.password;
  console.log(`User: ${user} is requesting login`);
  // do something with the data - login, save, edit
  res.end();
});

Поскольку вы, очевидно, передаете данные для входа (ИЗ формы в свой серверный сервер),
вам следует использовать некоторое промежуточное программное обеспечение аутентификации для выполнения входа в систему.

Чтобы удобно отправлять обработанный html на ваш серверный сервер, вам следует ознакомиться с темой просмотров.

И я уверен, что документация по express api будет вам очень полезна.

https://expressjs.com/en/api.html