通过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/）了解更多产品信息和文档。
相关·内容
};
method: 'POST', 'Content-Type': 'application，该函数将呈现两个EJS视图中的一个。视图。我认为正在发生的事情是，它将视图的HTML标记发送回客户端javascript。期望的行为是使用给定的参数呈现“聊天”或“索引”视图。我怎样才能做到这
浏览 24提问于2021-03-20得票数 0
在twitter bootstrap弹出窗口中插入backbone渲染视图，如下所示。问题是，当通过内容选项主干插入视图时，事件不会触发。我在div中插入了视图，以便用$(选择器).html attendanceShow.render().el事件正常工作。attendance = new Attendance()
attendance.url = "#{attendanceUrl}/#{attendanceId}&qu
浏览 2提问于2012-11-29得票数 9
marked(bot.desc); bot.owner = []; await fetch(`${process.env.DOMAIN}/api/client/users/${id}`).then(r=>r.json()).then(async d=>{ }); await console.log(
浏览 12提问于2021-04-17得票数 0
我正在通过EJS将从API返回的数据传递给客户端。我在客户端访问返回的JSON数组失败。在服务器端，我成功地将返回的数据传递给客户端，如下所示： .then(res => res.json()) ], }由于这是一个对象数组，并且该数组中显然有两个主要对象，因此我希望能够像这样访问我的EJ
浏览 0提问于2018-03-05得票数 1
我使用nodejs服务器、express框架和fetch库向位于不同域的另一台服务器发送请求。对于我的一个端点，考虑(localhost:8080/ login )我正在呈现ejs文件，当用户单击登录按钮时，我正在向另一个域中的不同服务器发送一个fetch请求(https:therserver.com我得到了这个错误：
对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“access - control -Allow-Origin”标头。因此不允许访问源'‘。
浏览 3提问于2017-11-22得票数 5
回答已采纳
mounted'); console.log('updated'); fetch('/api/books?script>在我的app.js中，我只是要求riot，test.tag和do riot.mount('#root', 'test'); this is init screen，为什么
浏览 3提问于2016-08-26得票数 2
4回答
我正在学习使用JavaScript开发Backbone.js的MVC应用程序，并且在视图中存在呈现模型集合的问题。我想做的是：
$(function(){
this.template = _.template($("#ptpl").htm
浏览 3提问于2013-07-11得票数 15
回答已采纳
1回答
来自API的50个项的响应大小约为25 50。我的HTML页面有一个load按钮，它会触发一个事件，并在单击时再加载50个项目。我面临的问题是，当启动单击时，视图需要一段时间才能加载，即视图消失，用户忘记加载视图之前的位置。是否有办法使视图呈现速度快得多，这样它就不会消失，用户可以准确地记住他在哪里。当单击带有类load的按钮时，会触发加载更多数据的事件。这是我代码的一部分。({url: '
浏览 3提问于2017-06-15得票数 0
回答已采纳
1回答
我已经在不同的js文件中创建了模型，视图和集合，我正在使用require.js加载所有文件，数据插入是执行的，但当我编辑或删除数据时，它不会执行，当编辑数据而不是发送PUT请求时，它将发送POST请求并插入新数据可能是模型实例未与视图连接。
我使用nodejs进行服务器端渲染，使用backbonejs进行客户端渲染。我的模板具有使用ejs视图引擎的.html扩展名n。
浏览 0提问于2012-02-09得票数 0
function() { return this.render(); template: new EJS({ }), $(this.parentEl).children这样做，我的视图上的clicks事件不会被捕获，我的方法set
浏览 0提问于2012-11-07得票数 0
回答已采纳
3回答
title:'Login',userField:'Username',passField:'Password',photo: photo});var path = 'views/form.ejs';stream.pipe(res);
在form.ejs中，当使用pipe进行响应时，我的<% include menu
浏览 1提问于2016-01-24得票数 0
4回答
我试图渲染html文件，但是我得到了这个错误。我在公共folder.how中使用了login.html来提前呈现html file.thanks。});
错误:无法查找视图
浏览 0提问于2013-03-20得票数 1
现在，我有一个GET方法用于根呈现一个带有fileReader和画布的EJS模板。通过脚本标记将代码附加到EJS文件的底部，我将上传的图像绘制到画布上，以便读取每个像素的rgb值。然后，我尝试将这些rgb值发送到应用程序中的POST路由(通过fetch)，但它不像预期的那样工作。它只是停留在相同的“索引”视图的应用程序启动。
有人能给我一些关于为什么会发生这种事的见解吗？我还在ejs模板中的脚本标记中包含了控制台日志，这些日志只显示在浏览器中，而不是显示在我启动快速应用
浏览 2提问于2020-11-10得票数 1
回答已采纳
我正在尝试呈现一个EJS模板，并通过node package请求将数据传递给它。在我的上一个项目中使用node-fetch时，我已经可以正常工作了。下面是其中的一个快速片段： fetch(url) .catch(err => { res.sendSt
浏览 0提问于2018-02-26得票数 0
但是视图/ejs文件不会被渲染。如果我这样做了：});app.get("/", function(req, res){
});
它不工作，我得到“索引是不定义的”在网站的提示端express = requi
浏览 0提问于2017-11-27得票数 0
1回答
var ProjectListView = Backbone.View.extend({ var projectCollection = new ProjectCollection(); }
浏览 0提问于2013-05-27得票数 1
回答已采纳
如何将数组数据循环显示到网页中，无法显示控制台中提供的对象数据 constructor(){ this.state={ }; render() {
fetch('https:/&#x
浏览 0提问于2017-08-05得票数 0
但是，在向注册用户的注册路由发送请求时，我收到了UnhandledPromiseRejectionWarning错误。即使在路由中有then和catch，它仍然会给出这个错误，因此我很困惑。
浏览 12提问于2019-01-15得票数 0
回答已采纳
在我的router中，当我访问/quiz时，我希望通过doGetQuiz呈现quiz.ejs并获取测验数据，以便在quiz.ejs中显示它们 doGetQuiz:function(req,res,next){ }这是我的模型
const API_KEY="https://opentdb.com/api
浏览 0提问于2020-08-10得票数 0
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
腾讯云开发者
