ExpressJS如何将变量传递给JavaScript

Question

我完全不知道该怎么做；我正在使用NodeJS获取JSON数据，并且需要将变量传递到我的页面上，让JavaScript使用这些数据。

app.get('/test', function(req, res) {
    res.render('testPage', {
        myVar: 'My Data'
    });

这是我的Express代码（为了测试目的非常简单）; 现在我想使用JADE收集这些数据，我知道如何在页面上呈现它。

p= myVar

但是我需要能够在JavaScript中收集这些数据（如果可能的话在.js文件中），但现在只是为了在一个警告框中显示变量，我已经尝试过了。

alert(#{myVar})

如果有人能帮忙，将不胜感激，还有很多其他的问题需要解决。

- Nick White

---

我对Node.JS或express不是很了解，但我认为你应该更改testPage模板，将<input type=hidden>与myVar的值包含在内。 - André Alçada Padez

但是也许Express有办法将我们从那些中抽象出来。 - André Alçada Padez

如果你要传递HTML，使用Jade、Mustache或其他模板。如果你要传递数据，则使用JSON，并让你的传输解析成一个对象，如果响应是Content-Type: application/json。 - Ryan Olds

这并不是我想要询问的，我想要将一个通常为p= myVar的 JADE 视图变量传递给 JavaScript 变量。 - Nick White

Answer 1

尝试以下方法：

alert('!{myVar}')

如果数据不仅仅是字符串，那么将数据进行 JSON 编码是个好主意。

alert('!{JSON.stringify(myVar)}')

- dzajdband

---

这解决了我的问题，谢谢你的帮助；然而，为了传递到 .js 文件中，只需要在 .jade 文件中创建变量，然后 .js 文件就能接收到了，再次感谢。 - Nick White

Answer 2

正如Timothy所说：

<script type="text/javascript"> var myVar = #{JSON.stringify(myVar)}; </script>

如果您不喜欢在Jade/Pug模板中编写HTML，则也可以按照以下方式完成：

script
  var myVar = !{JSON.stringify(myVar)};
  var myVar2 = !{JSON.stringify(myVar2)};

更新：对于 Express 4 和 Pug，请使用 script. 而不是 script，这样它将呈现为 JavaScript 而不是 HTML。

- Bennit

Answer 3

好的，Javascript（和V8）有一个内置函数可以从对象渲染JSON，并且JSON恰好与Javascript在语法上兼容。

因此，实现您尝试做的最简单的方法是：

<script type="text/javascript>var myVar = #{JSON.stringify(myVar)};</script>

是的，你可以在Jade模板中使用HTML。

- Timothy Meade

Answer 4

我知道我来晚了，但是几个月前我实际上写了一个模块（JShare）来解决这个确切的问题。看看它：https://npmjs.org/package/jshare

- BFree

Answer 5

你可以使用Now.js来实现这个功能。它可以轻松地让你在客户端和服务器端实时共享变量。

看一下这个链接：http://www.nowjs.com/

- JP Richardson