如何将 JSON 数据从 Node js 路由传递到 html 文件中的脚本？答案

【问题标题】：How to pass JSON data from Node js route to script inside an html file?如何将 JSON 数据从 Node js 路由传递到 html 文件中的脚本？
【发布时间】：2018-10-19 02:59:22
【问题描述】：

我正在尝试使用来自 mongodb 集合的数据填充我的索引 html 中的下拉列表。我填充的代码如下所示：

    <script>
        document.addEventListener("DOMContentLoaded", function() {
          for (element in mongoData){
            var option = document.createElement('option');
            option.innerHTML = element;
            option.value = element;
            document.getElementById('Active_Sessions').append(option);
          }
        });
      </script>

在app.js中，我的路由如下：

    app.use("/",(req,res) => {
        res.sendFile(__dirname + "/index.html")
     })

我需要将 JSON 对象 'mongoData' 传递给这个 html，但不知道该怎么做。 'mongoData' 将是从给定集合中收集的一些数据的 JSON。

我想到但尚未实现的一个解决方案是将此 mongodata 写入文本文件或 csv 文件或 app.js 中的类似文件，然后从我的填充脚本中读入文件。我觉得这会是一种糟糕的形式，而且不是很安全。

我想到的另一个选择是尝试在填充脚本中连接到猫鼬服务器，但是当我尝试这样做时，它不起作用，所以我有点认为这是不可能的。

在发布之前我已经研究过使用 res.render() 来发送 JSON，但我并不真正了解模板是什么，如果我可以避免的话，我宁愿不必了解所有这些.

有没有优雅的解决方案？

【问题讨论】：

您可以设置另一条路线来获取mongoData 并对该路线进行AJAX 调用。
您能详细说明一下吗？我以前没有使用 AJAx 的经验。

标签： javascript jquery json node.js mongodb

【解决方案1】：

您可以更改服务器中的数据，例如通过模板引擎。

或者您可以构建类似的东西来做同样的事情。虚拟逻辑：

使用 fs 模块读取文件。
使用正则表达式替换/插入您的内容（例如来自您的对象）。
将结果发送给客户端。

更新：自定义模板引擎的简单示例。

首先是一个简单的html文件——index.html（请注意$replace_me）：

<html>
  <body>
    <div class="circle">
      $replace_me

      <div class="square">
        something else
      </div>
    </div>
  <body>
</html>

在我们的节点服务器中，我们可以这样做：

var fs = require('fs');

//used sync for clean demo, use async in production
var _html_cont = fs.readFileSync('index.html', {encoding: 'utf-8'});

//dynamic content to replace
var _repl = "<div>I am new!</div>";

//actually replace it
var _im_regex = new RegExp("\\$replace_me", "gm");
_html_cont = _html_cont.replace(_im_regex, _repl);

 //send result to client
 res.writeHead(200, { 'content-type': 'text/html' });
 res.write(_html_cont);
 res.end();

【讨论】：

当您说使用正则表达式插入内容时，我该怎么做？我查找的所有内容都告诉我无法在 js 中读取服务器端文件。