Nodejs ejs文件的一个问题

Nodejs ejs文件的一个问题

比如我在前面的<% %>中定义几个变量

<% var nameList = []; var answerList = []; var scoreList = []; %>

我能在后面的<script> </script>之间去使用吗？

现在貌似不能用，它在<script> </script>中不识别之前<% %>中定义的变量。

不知道是不是因为render完了之后<% %>中的变量就消亡了。


2 回复

当然可以。在EJS模板引擎中，<% %> 是用来执行JavaScript代码块的标签，而 <%= %> 用于输出表达式的值。你提到的问题是因为EJS 的 <% %> 和 <%= %> 代码块仅在服务器端被解析和处理，生成最终的HTML页面后，这些变量在客户端的 <script> 标签中是不可见的。

如果你想在客户端（即浏览器中）使用这些变量，你需要将它们以某种方式传递到客户端。以下是几种常见的方法：

方法一：直接在HTML中插入变量

你可以直接在HTML中输出变量，然后在 <script> 标签中引用这些值。

<!-- 在HTML中输出变量 -->
<%
  var nameList = ['Alice', 'Bob'];
  var answerList = [1, 2];
  var scoreList = [90, 85];
%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Example</title>
</head>
<body>
    <!-- 将变量输出为全局变量 -->
    <script>
        var nameList = <%= JSON.stringify(nameList) %>;
        var answerList = <%= JSON.stringify(answerList) %>;
        var scoreList = <%= JSON.stringify(scoreList) %>;
    </script>
    
    <script src="your-script.js"></script>
</body>
</html>

在这个例子中，我们将变量通过 <script> 标签直接注入到全局作用域中，这样在 your-script.js 文件中就可以直接访问这些变量了。

方法二：通过API请求获取数据

如果你的数据需要动态加载或从数据库中获取，可以考虑通过一个API请求来获取这些数据。例如，创建一个路由来返回这些数据：

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

app.get('/data', (req, res) => {
  const data = {
    nameList: ['Alice', 'Bob'],
    answerList: [1, 2],
    scoreList: [90, 85]
  };
  res.json(data);
});

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

然后在客户端通过AJAX请求获取这些数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Example</title>
</head>
<body>
    <script>
        fetch('/data')
            .then(response => response.json())
            .then(data => {
                var nameList = data.nameList;
                var answerList = data.answerList;
                var scoreList = data.scoreList;
                
                // 使用这些数据
                console.log(nameList, answerList, scoreList);
            });
    </script>
</body>
</html>

这两种方法都可以解决你在EJS模板中定义的变量在 <script> 标签中不可用的问题。选择哪种方法取决于你的具体需求和应用场景。


在EJS模板中，<% %> 用于执行JavaScript代码，而 <%= %> 用于输出变量的值。由于EJS是服务端渲染，因此你在 <% %> 中定义的变量在 <script> 标签内是不可见的，因为这些脚本是在客户端执行的。

如果你想在客户端（即浏览器）中访问这些变量，你需要先将它们输出到HTML中，然后再通过JavaScript获取这些值。以下是如何实现这一点的示例：

示例代码

<!-- 在EJS模板中定义变量 -->
<% 
var nameList = ["Alice", "Bob"];
var answerList = [42, 100];
var scoreList = [90, 85];
%>

<!-- 将变量输出到HTML中 -->
<script type="text/javascript">
  // 获取从服务器传递过来的数据
  const nameList = <%- JSON.stringify(nameList) %>;
  const answerList = <%- JSON.stringify(answerList) %>;
  const scoreList = <%- JSON.stringify(scoreList) %>;

  console.log(nameList);   // 输出: ["Alice", "Bob"]
  console.log(answerList); // 输出: [42, 100]
  console.log(scoreList);  // 输出: [90, 85]
</script>

解释

  • <%- %>：与 <%= %> 类似，但它不会对输出进行转义。如果你直接输出一个JavaScript数组或对象，需要确保它是安全的。
  • JSON.stringify()：将数据转换为JSON字符串，以便在JavaScript中使用。

这样，你就可以在 <script> 标签中正确地访问和使用这些变量了。

回到顶部