Nodejs中jade模板的script中怎么取到后台传来的json变量

Nodejs中jade模板的script中怎么取到后台传来的json变量

后台

res.render('user', { 
            title: 'Example',
            message: '',
            data:data,
            errors: errors
        });

模板

    script(src="javascripts/form.js")
    script
　　　console.log(data);

firebug提示ReferenceError: data is not defined

https://github.com/visionmedia/jade 上面可以传到页面里面，但怎么在js里面引用变量呢


11 回复

Node.js 中 Jade 模板的 script 中如何取到后台传来的 JSON 变量

后台代码

假设你在 Node.js 应用中使用 Express 框架来渲染 Jade（现称为 Pug）模板。你的后端代码可能看起来像这样：

app.get('/user', function(req, res) {
    var data = { name: "John Doe", age: 30 };
    var errors = ["An error occurred."];
    res.render('user', { 
        title: 'Example',
        message: '',
        data: data,
        errors: errors
    });
});

在这个例子中，data 和 errors 被传递给模板。

Jade 模板

Jade 模板文件 (user.pug) 的内容如下：

doctype html
html
  head
    title= title
  body
    script(src="javascripts/form.js")
    script.
      console.log(data);

这里，data 是一个 JavaScript 对象，需要在客户端的脚本中正确地访问它。然而，直接在 <script> 标签中使用 console.log(data); 会报错，因为 data 在全局作用域中不可见。

正确的方法

为了在 JavaScript 文件中访问 data，你需要将 data 以字符串的形式嵌入到 HTML 页面中。可以通过在 Jade 模板中添加一个隐藏的 DOM 元素来实现这一点：

doctype html
html
  head
    title= title
  body
    #data-container(data='#{JSON.stringify(data)}')
    script(src="javascripts/form.js")
    script.
      var jsonData = JSON.parse(document.getElementById('data-container').getAttribute('data'));
      console.log(jsonData);

在这个例子中，我们创建了一个带有 data 属性的隐藏元素，并通过 JavaScript 解析该属性中的 JSON 字符串。

示例代码

完整的 Jade 模板代码如下：

doctype html
html
  head
    title= title
  body
    #data-container(data='#{JSON.stringify(data)}')
    script(src="javascripts/form.js")
    script.
      var jsonData = JSON.parse(document.getElementById('data-container').getAttribute('data'));
      console.log(jsonData);

这样，你就可以在 JavaScript 文件中安全地访问从服务器传递过来的 data 对象了。


先放到隐藏域中，在取出来不行吗

还要在页面搞个中转站?

和html里面一样。

script
  console.log(#{data});

但是如果你的data是个对象的话，在后端先JSON.stringify(data)吧。然后前端再parse回来。

我按你的方式写会报错呀

see express-state https://github.com/yahoo/express-state

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

script console.log()直接这么输出就会报错，什么原因呢

JSON.stringify(data)把对象序列化，放在隐藏域或者直接放在脚本中，然后parse回来，剩下的就是细节问题了～

在jade的js部分直接声明变量就可以了，例如： var gameId = ‘#{gameId}’; console.log(gameId); 这样gameId就可以在js中直接使用了。。。。

在Node.js中使用Jade（现在称为Pug）模板引擎时，如果你想在JavaScript脚本中访问由Node.js传递给模板的JSON变量，可以通过将这些变量嵌入到HTML中，然后通过JavaScript获取这些嵌入的数据。

以下是实现这一目标的方法：

后端代码（Node.js）

确保你在渲染模板时正确地传递了数据：

res.render('user', {
    title: 'Example',
    message: '',
    data: data, // 假设data是一个JSON对象
    errors: errors
});

Jade/Pug模板代码

你可以直接将JSON对象转换为字符串，并嵌入到页面中的一个元素里。例如，将其嵌入到一个<script>标签内的隐藏<div>或<span>标签中：

script.
  var jsonData = !{JSON.stringify(data)};
  console.log(jsonData); // 在控制台中输出JSON数据

// 或者你可以将其嵌入到一个隐藏的DOM元素中，然后通过JavaScript获取
div(style="display:none" id="data-json")= JSON.stringify(data)

注意，使用!{}会转义变量，而直接使用#{}则会进行HTML编码，因此在这里我们使用!{}来确保JSON字符串不会被意外地转义。

JavaScript代码

如果你选择将JSON数据嵌入到隐藏的DOM元素中，那么可以在JavaScript文件中这样做：

// 获取嵌入的JSON数据
var dataJsonString = document.getElementById('data-json').innerHTML;
var data = JSON.parse(dataJsonString);

console.log(data); // 现在你可以在form.js文件中访问这个JSON对象

这种方法确保了你的JSON数据可以在客户端的JavaScript环境中安全地访问，而不会引发错误如ReferenceError: data is not defined。

回到顶部