在node.js中一起發送JSON和HTML頁面

Question

我將HTML文件發送到node.js中的客戶端，如下所示

app.get('/get', function(req, res) {
    res.render(index.html);
});

在這里，index.html是指一個json文件。 如何將兩者一起發送或在客戶端中引用json文件？

Answer 1

HTTP一次僅發送一個資源。 如果您的頁面正在請求JSON文件，則需要將其作為第二個請求。

或者，您可以使用<script>塊呈現HTML，該塊具有以JSON編碼的數據作為值的變量賦值。

Answer 2

如果您不想作為獨立的HTTP請求從客戶端請求JSON文件，則可以執行以下操作之一：

完整的服務器端渲染：

使用像胡子或把手這樣的模板技術，並嘗試使數據與響應內聯。 例如，如果您的JSON文件返回一個名稱和地址，則index.html可能如下所示：

<div>
  <span>Name: {{name}} </span>
  <address>Address: {{address}} </span>
<div>

然后，在渲染時，您可以將帶有屬性name和address的js對象傳遞給模板，而無需分別要求JSON文件。 此示例遵循小胡子准則，以防萬一我不夠明確。

內聯對象

有點像以前的解決方案，但不太優雅，您可以將完整的JSON響應添加為帶有script標記的對象，然后按您認為合適的方式使用它。 嘗試像這樣將塊附加到index.html HEAD上：

<script>
   var myObject = <contents of your JSON object>
</script>

另一個答案僅描述了另一種可能的解決方案。

我希望這有幫助。

Answer 3

您不能在單個請求中發送回兩種文件，但是您可以在html中進行ajax調用以獲取所需的json：

<script type="text/javascript">
var json_data;
$.getJSON("URL_HERE", function(data) { json_data = data; });
</script>

或通過模板引擎將json作為javascript對象添加到html中（如下所示的jade）：

script(type="text/javascript").
    var json_data = #{ JSON.stringify(JSON_OBJECT_HERE) }