求教 页面传值的一个问题，Nodejs，express，res.render，对象，json

求教 页面传值的一个问题，Nodejs，express，res.render，对象，json

res.render(‘game’, { title : ‘进入游戏’, user : req.session.user, userdata : userdata, success : req.flash(‘success’).toString(), error : req.flash(‘error’).toString() });

这段代码，我进入game.ejs 页面，其中在 <%　％＞　里可以访问到user ，userdata 等对象，但是在ｊｓｐ代码片段里他们是没有定义的，该怎么得到，我要在ｊｓｐ代码里用到userdata 对象，还有什么办法，就是服务端把数据返回页面的问题， 新手求教各位大侠了，今天想了一天还是不会


11 回复

当然可以。根据你的描述，你希望在 ejs 模板中的 JavaScript 代码片段里也能访问到传递给模板的数据。以下是一个详细的解决方案，包括示例代码和解释。

示例代码

首先，假设你在 Node.js 中使用 Express 框架来渲染 game.ejs 模板：

// 导入必要的模块
const express = require('express');
const app = express();
const session = require('express-session'); // 假设你需要使用会话
app.use(session({ secret: 'your-secret-key' }));

app.get('/game', (req, res) => {
    const user = req.session.user;
    const userdata = { name: 'John Doe', age: 25 }; // 示例用户数据
    res.render('game', {
        title: '进入游戏',
        user: user,
        userdata: JSON.stringify(userdata), // 将对象转换为 JSON 字符串
        success: req.flash('success').toString(),
        error: req.flash('error').toString()
    });
});

解释

  1. 将对象转换为 JSON 字符串：

    • 在上面的代码中，我们将 userdata 对象转换为 JSON 字符串并传递给模板。这是因为直接传递对象到 EJS 模板时，它会被序列化为字符串，而在 JavaScript 代码片段中需要显式地解析它。

  2. 在 EJS 模板中使用数据：

    • 在 game.ejs 模板中，你可以通过 <%- %> 输出未转义的 HTML 或 JavaScript 代码，或者直接在 <script> 标签中使用 JSON.parse() 来解析 JSON 字符串。
    <script>
    const userdata = <%= JSON.parse(userdata) %>; // 解析 JSON 字符串
    console.log(userdata.name); // 输出 "John Doe"
</script>

    或者，如果你只是想在客户端使用这些数据，可以直接在 <script> 标签中使用：

    <script>
    const userdata = JSON.parse('<%- JSON.stringify(userdata) %>');
    console.log(userdata.age); // 输出 25
</script>

总结

通过将对象转换为 JSON 字符串并在客户端解析它，你可以在 EJS 模板的 JavaScript 代码片段中访问到这些数据。这样可以确保服务器端的数据能够正确传递并被客户端 JavaScript 使用。


没明白啥意思，是怎么和jsp衔接的啊！

是这样，服务端如何给页面传对象呢，这个对象要在页面的jsp代码里能访问到

我的情况和楼主差不多， 1、在router里用res.render把数据传入EJS模板 2、在EJS页面里<%%>可以使用调用传入的数据，但不知如何把值传入<script type=“text/javascript”>里。 主要是想利用数据库里的数据与JS即使获得的数据进行比较。

对对 ，我就是这种情况，求各位大神指教

1、在router里用res.render把数据传入EJS模板 2、在EJS页面里<%%>可以使用调用传入的数据，但不知如何把值传入<script type=“text/javascript”>里。

找到答案里，用<%- %>，例如你的例子<%- user %>，唉

唉，研究的累啊

好神奇，谢谢了

可以在js里面另写一个方法（即时）获取数据库的数据。 反正你取的数据库的数据主要作用不是为了渲染页面。

在Express中使用res.render方法将数据传递给视图时，默认情况下这些数据只能在EJS模板的<% %>标签中直接访问。如果你想在JavaScript代码片段中也使用这些数据，你可以通过以下几种方式实现：

方法一：将数据嵌入到HTML元素中

你可以在HTML中创建一些隐藏的元素，然后在JavaScript代码中读取这些元素的值。

例如，在你的EJS模板中：

<div id="userdata" style="display:none;" data-userdata='<%- JSON.stringify(userdata) %>'></div>

然后在你的JavaScript代码中，可以通过DOM操作来获取这些数据：

let userdata = JSON.parse(document.getElementById('userdata').getAttribute('data-userdata'));
console.log(userdata);

方法二：将数据直接嵌入到JavaScript代码中

你也可以直接将数据嵌入到你的JavaScript代码中：

<script>
  const userdata = <%- JSON.stringify(userdata) %>;
  console.log(userdata);
</script>

这样你就可以直接在JavaScript代码中使用userdata变量了。

方法三：通过Ajax请求获取数据

如果你希望在JavaScript代码中异步地获取这些数据，你可以使用Ajax请求从服务器获取数据。

在服务器端添加一个路由来处理这个请求：

app.get('/get-userdata', (req, res) => {
  res.json(userdata);
});

在客户端，使用fetch或axios等库发起请求：

fetch('/get-userdata')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

以上是几种常用的方法，你可以根据具体需求选择合适的方式。

回到顶部