通过fetch API触发时，EJS视图不会渲染
的原因是因为fetch API是基于浏览器的原生JavaScript API，它可以发送HTTP请求并获取响应，但它并不会自动执行服务器端的模板引擎渲染操作。
EJS（Embedded JavaScript）是一种简洁、高效的JavaScript模板引擎，用于在服务器端生成动态HTML页面。它允许开发人员在HTML中嵌入JavaScript代码，并通过模板引擎将动态数据注入到HTML中，最终生成完整的HTML页面。
当使用fetch API发送请求时，它会异步获取服务器端返回的数据，但不会执行服务器端的模板引擎渲染操作。因此，即使服务器端使用EJS模板引擎生成了HTML页面，但在浏览器端接收到的仍然是未经渲染的EJS模板代码。
要解决这个问题，可以在服务器端使用EJS模板引擎将数据渲染成HTML页面，然后将渲染后的HTML作为响应返回给浏览器。在浏览器端接收到响应后，可以将返回的HTML直接插入到页面中的指定位置，或者使用JavaScript将其渲染到相应的DOM元素中。
以下是一个示例代码，展示了如何在服务器端使用EJS模板引擎渲染HTML页面，并通过fetch API获取渲染后的HTML：
- 服务器端代码（Node.js + Express）：
const express = require('express');
const app = express();
const ejs = require('ejs');
app.set('view engine', 'ejs');
app.get('/render', (req, res) => {
const data = {
title: 'Hello, EJS!',
message: 'This is a rendered EJS template.'
};
ejs.renderFile('template.ejs', data, (err, html) => {
if (err) {
console.error(err);
res.status(500).send('Internal Server Error');
} else {
res.send(html);
}
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});- template.ejs文件内容：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>- 客户端代码（使用fetch API获取渲染后的HTML）：
fetch('/render')
.then(response => response.text())
.then(html => {
document.getElementById('content').innerHTML = html;
})
.catch(error => {
console.error(error);
});在上述示例中，服务器端使用EJS模板引擎将template.ejs文件渲染成HTML页面，并通过路由/render返回给浏览器。客户端使用fetch API发送GET请求获取渲染后的HTML，并将其插入到id为content的DOM元素中。
请注意，以上示例仅为演示目的，实际应用中可能需要根据具体情况进行适当的修改和优化。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云云函数（SCF）、腾讯云对象存储（COS）等。你可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多产品信息和文档。
相关·内容
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
腾讯云开发者
