使用node和ejs在单击时显示表格
答案如下：
在使用Node.js和EJS时，可以通过以下步骤来实现在单击事件中显示表格：
- 首先，确保已经安装了Node.js和EJS依赖包。可以使用npm命令来安装它们：
npm install express ejs- 创建一个新的Node.js项目，并在项目文件夹中创建一个名为
app.js的文件。 - 在
app.js文件中引入必要的模块并设置基本的Express应用程序：
const express = require('express');
const ejs = require('ejs');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('public'));
// 其他配置和路由定义可以在这里添加
app.listen(3000, () => {
console.log('Server is running on port 3000');
});- 在项目文件夹中创建一个名为
public的文件夹，并在其中创建一个名为index.html的文件。这个文件将是我们的前端页面。
<!DOCTYPE html>
<html>
<head>
<title>显示表格</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
$.ajax({
url: '/table',
method: 'GET',
success: function(data) {
$('#result').html(data);
}
});
});
});
</script>
</head>
<body>
<button>显示表格</button>
<div id="result"></div>
</body>
</html>这段HTML代码创建了一个按钮，当单击按钮时，通过AJAX请求向服务器发送GET请求，以获取表格数据并显示在页面上。
- 在
app.js文件中添加一个GET路由处理程序来处理表格请求，并使用EJS模板来渲染表格数据。
app.get('/table', (req, res) => {
const tableData = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
res.render('table', { data: tableData });
});- 在项目文件夹中创建一个名为
views的文件夹，并在其中创建一个名为table.ejs的文件。这个文件将是我们的表格模板。
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<% data.forEach(function(item) { %>
<tr>
<td><%= item.name %></td>
<td><%= item.age %></td>
</tr>
<% }); %>
</tbody>
</table>这个EJS模板使用了<% %>标签来嵌入JavaScript代码，通过遍历表格数据并将数据插入表格中。
- 运行Node.js应用程序：
node app.js- 在浏览器中访问
http://localhost:3000，点击按钮，表格数据将通过AJAX请求加载并显示在页面上。
注意：这个示例中使用了jQuery库来简化AJAX请求和DOM操作，需要在前端页面中引入相关的jQuery库文件。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
