如何在 ExpressJS 中使用 JSON 数据呈现 HTML 页面答案

【问题标题】：How to render an HTML page with JSON data in ExpressJS如何在 ExpressJS 中使用 JSON 数据呈现 HTML 页面
【发布时间】：2020-02-21 15:54:06
【问题描述】：

我一直在尝试通过从 API Wrapper (api.jikan.moe) 获取数据来构建动漫应用程序。我在 HTML 表单中创建了一个表单来发送帖子数据，然后我的 node.js 脚本从 API 获取数据。

如何渲染 JSON 并以 HTML 页面的形式显示 json 数据？

这是我的代码 index.html

<form  method="POST" action="http://127.0.0.1:3000/find">
        <div class="form">
                <input type="text" name="animeName" placeholder="Anime Name"><input type="submit" value="Search" id="searchBtn">
        </div>
    </form>

main.js

app.post('/find', (req, res) => {
mal.search('anime', req.body.animeName, '')
    .then(info => {
        let list = []
        for(var i = 0; i < info.results.length; i++){
            list.push(info['results'][i])
        }
        res.json(info)
    })
    .catch(err => {
        console.log(err)
        res.send("Error Occured")
    })
})

【问题讨论】：

如果您希望 Express 发送 HTML，则发送 HTML 而不是 JSON。
究竟如何？你能发布一些代码吗？
expressjs.com/en/guide/using-template-engines.html

标签： javascript html node.js forms express

【解决方案1】：

提交表单时，会将表单数据发送到服务器并刷新页面。

您必须使用 AJAX 提交表单。

【讨论】：

"页面已刷新" — 不，显示的是 JSON
“你必须使用 AJAX 来提交表单”——不，常规的表单提交就可以了。
Quentin，我在使用模板引擎时遇到了一些麻烦，你能写一些样板代码来说明它是如何工作的吗？
你为什么投反对票？您可以使用 AJAX 执行此操作，如下所示$.ajax({ dataType: "json", url: "http://127.0.0.1:3000/find", success: function (data) { console.log(data); $("#animeForm").append(JSON.stringify(data));