在 Node.js/Express.js 中，如何将 JSON 对象从服务器传输到客户端？

Posted 2023-02-27

技术标签:

【中文标题】在 Node.js/Express.js 中，如何将 JSON 对象从服务器传输到客户端？【英文标题】：In Node.js/Express.js, how can I transfer a JSON object from server to client? 【发布时间】：2018-12-25 18:47:18 【问题描述】：

在我的服务器中，我从数据库中检索一个对象并将其保存在一个变量中，如下所示：

let files = ["file1": "file1Data", "file2": "file2Data" ... ];

我希望这些数据在我的客户端 javascript 中可用。

一种方法是设置一个 API 以在我的 JavaScript 中调用。我的想法是，这会导致额外的往返行程。这是因为有一个请求加载初始 html/JavaScript，然后另一个请求加载 JSON 数据。

因此，将 JavaScript 与加载页面的初始请求一起发送到客户端会更快。

如何直接从服务器发送 JSON 对象并使其在客户端 JavaScript 中可用？

【问题讨论】：

有很多选择。从另一个 SO 问题中查看这个答案：***.com/a/19696261/3407994 如果您要发送带有此请求的页面，您可以在页面中包含脚本标记并将其设置为变量。抱歉，“设置 API 会导致额外的往返行程”是什么意思.....您是否在本地同时运行节点实例和前端网页？这与@NullPointer 链接的问题略有不同。我相信他在询问更多关于如何在响应中包含 HTML 页面旁边的 JSON 数据我认为使用 JSON.stringify 将字符串转换为在客户端使用 hidden variable 来存储此字符串。稍后在 JavaScript 中您可以引用隐藏元素值 【参考方案1】：

我会使用模板引擎，例如 EJS 或 Handlebars。

例如，使用 EJS (http://ejs.co/) -

服务器端：

// Set EJS as the view engine for Express
app.set('view engine', 'ejs');

// or just create a directory named 'views'
app.set('views', [
  path.join(__dirname, 'path/to/views'),
]);

app.get('/index', (req, res)=> 
  // 'index' must be in views dir
  return res.render('index', 
    // Pass in foo as the second argument
    // to res.render()
    foo: 'bar'
  );
)

index.ejs（EJS 模板）：

<script>
  const foo = <%- JSON.stringify(foo) %>;
</script>

【讨论】：

【参考方案2】：

正如您所说，如果您从数据库中检索数据，API 是最常用的方法（因为您可能会在加载网站后这样做）。如果您在用户请求网站时检索该网站，我的方法将简单地将其呈现为您提供给用户的 HTML。

我将在这里展示一个简单的示例，其中包含纯 app.write 和 app.get。

app.get('/', (req, res)=> 
  res.write("<h1>Hi</h1>");
  res.write("<script>var data="+ObjectYouRetrieve+";</script>");
  res.end();
)

【讨论】：

【参考方案3】：

在提供静态文件之前，您需要从数据库中获取对象并将内容添加到您发送的文件中。所以某种服务器端处理。 Node应用程序可以从磁盘读取index.html，解析它，找到设置json数据的地方，然后将数据作为response发送。

我不会那样做。您已经提出了多个请求，例如，客户要求index.html。服务器发送该文件。客户端然后请求所有资源，如 css、JavaScript、图像、字体等。对一些 json 数据的另一个小请求不会受到伤害。