Nodejs 请问ejs里面怎么输出json对象给页面的js调用？

Nodejs 请问ejs里面怎么输出json对象给页面的js调用？

要把json对象转为字符串，直接输出给页面的js变量赋值？

4 回复

当然可以！在 Node.js 中使用 EJS 模板引擎时，你可以将 JSON 对象传递给模板，并在客户端 JavaScript 中使用这些数据。以下是一个简单的示例来演示如何实现这一点。

示例代码

后端代码（Node.js）

首先，你需要确保你已经安装了 EJS 模板引擎。如果没有安装，可以通过 npm 安装：

npm install ejs

然后，在你的服务器端代码中，定义一个 JSON 对象并将其传递给 EJS 模板：

// server.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const data = {
        name: "John Doe",
        age: 30,
        hobbies: ["Reading", "Traveling", "Coding"]
    };

    // 将 JSON 对象传递给 EJS 模板
    res.render('index', { json_data: JSON.stringify(data) });
});

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

在这个例子中，我们创建了一个包含用户信息的 JSON 对象，并将其转换为字符串后传递给 index.ejs 模板。

前端代码（EJS 模板）

接下来，在 EJS 模板中，你可以通过嵌入 <script> 标签将 JSON 字符串插入到 JavaScript 变量中：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS and JSON Example</title>
</head>
<body>
    <h1>User Information</h1>

    <script>
        // 获取从服务器传递过来的 JSON 字符串
        const jsonData = <%= json_data %>;

        // 现在你可以像普通 JSON 对象一样使用它
        console.log(jsonData.name); // 输出 "John Doe"
        console.log(jsonData.age);  // 输出 30
        console.log(jsonData.hobbies); // 输出 ["Reading", "Traveling", "Coding"]
    </script>
</body>
</html>

解释

  1. 服务器端：我们在服务器端定义了一个 JSON 对象，并将其转换为字符串。然后通过 res.render() 方法将这个字符串传递给 EJS 模板。
  2. 客户端：在 EJS 模板中，我们使用 <%= json_data %> 语法来嵌入 JSON 字符串。这会使得该字符串直接出现在 HTML 的 <script> 标签中，从而可以在 JavaScript 中作为 JSON 对象使用。

这种方法简单且有效，使你在客户端 JavaScript 中可以直接访问从服务器传递的数据。


<script>
  var post = JSON.parse('<%= JSON.stringify(your_json_data)%>');
</script>

楼上正确,也可以直接在server里 res.render(‘xx’,’{json:‘json’}’);

然后

页面 <script> var json = <%=json%>; <script>

要在EJS模板中将JSON对象输出到页面中的JavaScript变量，可以使用EJS的插值语法 <%= %> 来输出JSON对象，并将其转换为JavaScript可以识别的格式。以下是一个简单的示例：

示例代码

假设你在Node.js服务器端有一个JSON对象，你想把它传递给EJS模板并在页面中以JavaScript变量的形式展示。

服务器端代码（例如：server.js）

const express = require('express');
const app = express();
const ejs = require('ejs');

app.set('view engine', 'ejs');

const jsonData = {
    name: "John Doe",
    age: 30,
    hobbies: ["Reading", "Gaming", "Traveling"]
};

app.get('/', (req, res) => {
    res.render('index', { data: jsonData });
});

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

EJS模板文件（例如：views/index.ejs）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS and JSON Example</title>
</head>
<body>
    <script>
        // 将EJS表达式输出的JSON字符串转换为JavaScript对象
        const myData = JSON.parse('<%- JSON.stringify(data) %>');
        console.log(myData); // 输出：{ name: "John Doe", age: 30, hobbies: [ "Reading", "Gaming", "Traveling" ] }
    </script>
</body>
</html>

解释

  1. 服务器端：我们定义了一个名为 jsonData 的JSON对象，并通过 res.render('index', { data: jsonData }); 将其传递给EJS模板。

  2. EJS模板：

    • 使用 <%- %> 语法来输出未经HTML编码的字符串，这是安全的做法，避免潜在的XSS攻击。
    • JSON.stringify(data) 将JSON对象转换成字符串。
    • JSON.parse() 将字符串转换回JavaScript对象，使得数据可以直接在JavaScript中使用。

这样，客户端的JavaScript就可以访问和操作这些从服务器传递过来的数据了。

回到顶部