Как вы отображаете ответ JSON от метода post на новой HTML-странице? - PullRequest
Новая
       12

Как вы отображаете ответ JSON от метода post на новой HTML-странице?

0 голосов
/ 13 июня 2019

Я пытаюсь настроить сервер с помощью Express, создать метод post, который выполняется через форму в файле pug, а затем отобразить полученные данные JSON на новой странице.

Следующий код (в server.js) устанавливает сервер, прослушивает порт 5000 и позволяет мне получить доступ к форме, размещенной в views / index.pug, открыв веб-сайт по адресу http://localhost:5000

// Set up the express app
const app = express();
// Parse incoming requests data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// Set up the view engine
app.set('view engine', 'pug');

// Get method for front end HTML
app.get('/', (req, res) => {
res.render('index')
})

// Define the port to run on 5000
const PORT = 5000;
// Set up the server to listen on port defined
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`)
});

В файле server.js у меня также есть пост-запрос: 

app.post('/api/test', (req, res) => {
    if (!req.body.field1) {
        return res.status(400).send({
            success: 'Request failed',
            message: 'field1 is required'
        });
    }.else if (!req.body.field2) {
        return res.status(400).send({
            success: 'Request failed',
            message: 'field2 is required'
        });
    }
    var returnVal = field2 + 100.5;
    res.send({
        success: 'True',
        message: 'The result is: ' + returnVal
    })
});

Когда я правильно ввожу два поля в форме на веб-сайте на localhost и нажимаю "Отправить", мне это нужнона URL http://localhost/api/test и отображает результирующие данные JSON.

То, что я хотел бы сделать, это создать новую html-страницу (файл pug), которая берет данные JSON из поста и отображает их.

У меня есть файл result.pug, который включает в себя: 

<div id="Result">
    <h1>My returned value</h1>
        <body>
            <h3> Result <h3>
        </body>
</div>

Я хотел бы отобразить результирующие данные JSON в разделе Result в теле, однако не уверен, как это реализовать.

Если я изменю конец запроса на публикацию на res.render('result'), то после правильной отправки формы я перехожу на страницу, на которую я хочу перейти, однако JSON не отправляется.Также не представляется возможным реализовать что-то вроде 

res.render('result).send({
   success: True
   message: 'The result is: ' + returnVal
});

Я просто не уверен, как:
- Перейдите на новую html-страницу и также отправьте ответ в запросе на публикацию по адресув то же время
- рендерит полученный JSON как часть содержимого HTML, а не только сам по себе.

...