ExpressJS 将变量传递给 JavaScript

1个回答

辛宁

2025-06-15 08:20

在使用 ExpressJS 构建 Web 应用程序时，经常需要将变量传递给 JavaScript。这样可以在前端页面中使用这些变量，实现动态数据展示和交互功能。下面将介绍一种简单的方法来实现这个目标。

首先，在 ExpressJS 中定义一个路由，用于处理前端页面的请求。在这个路由处理函数中，我们可以将需要传递的变量作为参数传递给渲染页面的函数。具体来说，可以通过在 res.render 方法中传递一个对象，将变量作为对象的属性进行传递。例如：

Javascript
app.get('/example', function(req, res) {
  var variable = 'Hello, World!';
  res.render('example', { variable: variable });
});

在上面的代码中，我们定义了一个 /example 路由，当用户访问这个路由时，会执行回调函数。在回调函数中，我们定义了一个变量 variable，并将其传递给渲染页面的函数 res.render。这里使用了一个对象 { variable: variable }，属性名为 variable，属性值为定义的变量 variable。

接下来，我们需要在前端页面中接收这个变量，并将其用于 JavaScript 的代码逻辑。在 ExpressJS 中，可以使用模板引擎来渲染前端页面，常用的模板引擎有 EJS、Handlebars 等。这里以 EJS 为例进行说明。

在前端页面中，可以使用 <%= %> 语法来输出传递的变量。例如，在 example.eJS 文件中可以这样写：

html
<!DOCTYPE html>
<html>
<head>
  <title>Example Page</title>
</head>
<body>
  <h1>Example Page</h1>
  <%= variable %>
  <script>
    // 在这里可以使用 variable 变量进行 JavaScript 逻辑的编写
    console.log('<%= variable %>');
  </script>
</body>
</html>

在上面的代码中，我们使用 <%= variable %> 来输出传递的变量 variable。在 JavaScript 部分，我们使用了 console.log 方法将变量输出到浏览器的控制台。

至此，我们已经实现了将变量传递给 JavaScript 的目标。当用户访问 /example 路由时，会渲染出一个包含传递变量的前端页面，同时 JavaScript 部分也能够正确接收并使用这个变量。

示例代码：

Javascript
const express = require('express');
const app = express();
app.set('view engine', 'eJS'); // 设置模板引擎为 EJS
app.get('/example', function(req, res) {
  var variable = 'Hello, World!';
  res.render('example', { variable: variable });
});
app.listen(3000, function() {
  console.log('Server is running on port 3000');
});

html
<!-- example.eJS -->
<!DOCTYPE html>
<html>
<head>
  <title>Example Page</title>
</head>
<body>
  <h1>Example Page</h1>
  
<img src="https://img.izhida.com/topic/d52387880e1ea22817a72d3759213819.jpg" alt="Java"><br>Java
<%= variable %>
  <script>
    console.log('<%= variable %>');
  </script>
</body>
</html>

：

通过 ExpressJS 可以很方便地将变量传递给 JavaScript，实现动态数据展示和交互功能。我们可以在路由处理函数中将变量传递给渲染页面的函数，然后在前端页面中使用模板引擎的语法来接收和使用这些变量。这样就能够在 Web 应用程序中实现灵活的数据传递和前端逻辑处理。

举报有用（4）分享收藏

ExpressJS 将变量传递给 JavaScript

1个回答

辛宁

热门话题

相关问题