Question

我正在尝试使用express设置服务器，创建一个post方法，该方法通过pug文件中的表单执行，然后在新页面上显示生成的JSON数据。

以下代码（在server.js中）设置服务器，侦听端口5000，并允许我通过打开http://localhost:5000

网站来访问views / index.pug中的表格。

// 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
    })
});

当我在本地主机上的网站上的表单中正确提供了两个字段并按Submit时，这会将我带到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内容的一部分，而不是单独呈现。

您如何在新的HTML页面上呈现post方法的JSON响应呢？

0 个答案: