首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

通过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:

  1. 服务器端代码(Node.js + Express):
代码语言:txt
复制
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');
});
  1. template.ejs文件内容:
代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>
  1. 客户端代码(使用fetch API获取渲染后的HTML):
代码语言:txt
复制
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/)了解更多产品信息和文档。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券