Nodejs 求问jade 怎么在script. 里输出一个json

Nodejs 求问jade 怎么在script. 里输出一个json

我用后台传了一个 json过来 t = {a:“b”}

我在jade 要怎么能输出到script. ?

script.
  var json = !{t};

这样不行 求方法. 跪求 谢谢各位了.

5 回复

当然可以！下面是一个关于如何在Jade模板中将JSON对象传递给JavaScript的解答。

标题

Nodejs 求问jade 怎么在script. 里输出一个json

内容

假设你在Node.js后端传递了一个JSON对象 t 到前端，例如：

res.render('your-template', { t: { a: "b" } });

然后在Jade模板中，你需要将这个JSON对象输出到JavaScript的变量中。你提到的方法使用了 !{} 插值语法，但可能没有正确地处理JSON格式。正确的做法是使用 | 符号来确保输出的JSON字符串是有效的。

示例代码

doctype html
html
  head
    title= "Example Page"
  body
    script.
      var json = !{JSON.stringify(t)};
      console.log(json); // 输出: {"a":"b"}

在这个例子中，我们使用了 JSON.stringify(t) 来确保传递的JSON对象被转换成一个有效的JSON字符串。这样做可以避免一些常见的错误，比如未转义的引号或特殊字符。

解释

  • !{JSON.stringify(t)}：这会将传递给Jade的JSON对象 t 转换为一个有效的JSON字符串。
  • var json = ...;：这行代码定义了一个名为 json 的JavaScript变量，并将其设置为从后端传递过来的JSON对象。
  • console.log(json);：这行代码用于在浏览器的开发者工具控制台中打印JSON对象，以便你可以验证输出是否正确。

通过这种方式，你可以确保在Jade模板中的JavaScript部分正确地接收并使用后端传递的JSON数据。希望这能帮到你！


呃… 不会写… 先对 t 执行一下 JSON.stringify 试试?

还是应该在服务器端处理完逻辑，客户端Jade这里就直接对模板应用数据。

例如，你把服务器端的JSON对象赋值给变量json之后，想做什么处理？不能在服务端先处理完吗？

叶总 你太牛X了 爱死你了

要将一个 JSON 对象从后端传递到前端的 Jade 模板，并在 <script> 标签中输出，可以使用以下方法：

示例代码

假设你有一个 JSON 对象 t 在后端，例如：

const t = { a: "b" };

然后，在 Jade 模板中，你可以这样写：

- var t = { a: "b" }  // 假设 t 是从后端传递过来的数据
script.
  var json = !{JSON.stringify(t)};

解释

  1. JSON.stringify():

    • JSON.stringify() 方法用于将 JavaScript 对象转换为 JSON 字符串。这一步是必要的，因为我们需要确保输出的 JSON 数据格式正确。

  2. !{…}:

    • 在 Jade 模板中，!{...} 语法用于输出未经转义的 HTML 内容。这使得我们可以直接插入 JSON 字符串。

  3. script.:

    • 这行定义了 <script> 标签内的内容。注意，Jade 使用缩进来表示代码块，所以 script. 后面的内容会成为 <script> 标签内的内容。

完整示例

假设你有一个简单的 Node.js 应用，如下所示：

// server.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const t = { a: "b" };
  res.render('index', { t });
});

app.listen(3000, () => console.log('Server running on port 3000'));

对应的 Jade 模板 views/index.jade:

doctype html
html
  head
    title= 'My Page'
  body
    h1 Hello World!
    script.
      var json = !{JSON.stringify(t)};

启动服务器并访问 http://localhost:3000，你会看到页面中的 JavaScript 变量 json 包含了 JSON 对象 { "a": "b" }。

这种方法可以确保 JSON 数据正确地被插入到 <script> 标签中，并且不会引起任何安全问题。

回到顶部