📅 最后修改于: 2023-12-03 15:07:39.015000 🧑 作者: Mango
EJS 是一种 JavaScript 模板引擎，它允许我们在服务器端使用 JavaScript 生成动态 HTML 页面。在使用 EJS 来构建应用时，我们经常需要在服务器端将数据传递给 HTML 页面，并且还需要在客户端使用 JavaScript 来实现一些交互性行为。在本文中，我们将探讨如何在 EJS 中同时使用服务器传递的值和客户端 JS。
在 EJS 中，我们可以使用 <%= %> 来输出我们从服务器端传递的值。下面是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
在上面的例子中，我们使用了 <%= %> 来输出服务器端传递的值。我们可以在服务器端传入一个包含 title 和 message 的对象：
app.get('/', function (req, res) {
res.render('index', {
title: 'Hello World!',
message: 'Welcome to my website'
});
});
当浏览器请求该页面时，EJS 将会渲染 index.ejs 模板并将 title 和 message 输出到 HTML 页面中。
如果我们需要在客户端使用 JavaScript 来添加一些交互性行为，例如点击按钮或者显示动画效果，我们可以将 JavaScript 代码写在 <script> 标签中。下面是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
<button id="btn">Click me</button>
<script>
document.getElementById('btn').addEventListener('click', function () {
alert('Hello, world!');
});
</script>
</body>
</html>
在上面的例子中，我们添加了一个按钮，并在 JavaScript 中为按钮添加了一个 click 事件监听器。当我们点击按钮时，会弹出一个对话框显示 'Hello, world!'。
我们也可以同时使用服务器端传递的值和客户端 JavaScript。例如，我们可以在服务器端传递一个数组，并在客户端使用 JavaScript 来迭代该数组并显示其内容：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<ul>
<% for (var i = 0; i < items.length; i++) { %>
<li><%= items[i] %></li>
<% } %>
</ul>
<button id="btn">Add item</button>
<script>
var items = <% JSON.stringify(items) %>;
document.getElementById('btn').addEventListener('click', function () {
var newItem = prompt('Enter new item:');
items.push(newItem);
updateList();
});
function updateList() {
var listItems = '';
for (var i = 0; i < items.length; i++) {
listItems += '<li>' + items[i] + '</li>';
}
document.querySelector('ul').innerHTML = listItems;
}
</script>
</body>
</html>
在上面的例子中，我们需要将服务器传递的数组转换为 JSON 字符串，然后使用 JavaScript 在客户端重新构建该数组并进行操作。
我们在页面中添加了一个按钮，并为其添加了一个 click 事件监听器。当我们点击按钮时，会弹出一个对话框要求输入新的条目。当我们输入新的条目并点击确定时，该条目会被添加到数组中，然后使用 updateList() 函数更新列表的内容。
总的来说，EJS 可以让我们很容易地在服务器端生成动态 HTML 页面，并借助客户端 JavaScript 实现交互性。通过合理使用 EJS 和客户端 JS，我们可以轻松构建令人瞩目的 Web 应用。