在web开发中，从 `.ejs` 文件（即Embedded JavaScript模板）向 `.js` 文件（通常是服务端的JavaScript文件或客户端的JavaScript脚本）发送数据通常涉及几个步骤。这里主要区分两种情况：一种是在服务器端使用Node.js和Express框架，另一种是在客户端处理数据。

### 服务器端：Node.js + Express

在这种场景下，`.ejs`文件作为模板文件，用于生成HTML。而`.js`文件通常是指服务端的脚件，比如Express的路由处理文件。在这种情况下，我们通常是在`.js`文件中将数据传递给`.ejs`文件，而不是反过来。下面是一个常见的例子：

1. **设置Express和EJS**
   首先，你需要在你的Node.js项目中安装并设置Express和EJS。

   ```javascript
   const express = require('express');
   const app = express();

   // 设置EJS为视图引擎
   app.set('view engine', 'ejs');

   // 设定视图文件夹
   app.set('views', path.join(__dirname, '/views'));
   ```

2. **路由处理**
   在Express的路由文件中，我们可以把数据传递给`.ejs`模板进行渲染。

   ```javascript
   app.get('/', (req, res) => {
     const data = { message: "Hello from server" };
     res.render('index', data);
   });
   ```

   这里`data`对象包含了要传递给`index.ejs`模板的数据。

3. **在EJS模板中使用数据**
   在`index.ejs`文件中，你可以使用`<%= message %>`来显示从`.js`文件传递过来的数据。

   ```html
   <!DOCTYPE html>
   <html>
   <head>
       <title>My Page</title>
   </head>
   <body>
       <h1><%= message %></h1>
   </body>
   </html>
   ```

### 客户端

如果你想从客户端的`.ejs`生成的HTML向客户端的`.js`文件发送数据，通常的做法是在`.ejs`文件生成的HTML中嵌入数据，然后在`.js`文件中读取这些数据。

1. **嵌入数据到HTML**

   在`index.ejs`中，你可以将数据嵌入到HTML元素的数据属性中，或者在`<script>`标签中定义全局变量。

   ```html
   <div data-message="<%= message %>"></div>

   <script>
   var messageFromServer = "<%= message %>";
   </script>
   ```

2. **在JavaScript中读取数据**
   在客户端的`.js`文件中，你可以通过查询DOM元素的数据属性或使用全局变量来获取这些数据。

   ```javascript
   // 使用数据属性
   const message = document.querySelector('div').dataset.message;

   // 使用全局变量
   console.log(messageFromServer);
   ```

总结：通常情况下，我们是从`.js`文件向`.ejs`文件发送数据，尤其是在服务端渲染的场景中。如果需要在客户端处理，通常是通过HTML中间来传递数据。

How to send the data from .ejs file to .js file?

1个答案

服务器端：Node.js + Express

客户端

你的答案