Fetch API触发按钮时res.render无法渲染EJS局部视图的解决方法

点击按钮通过Fetch API发送POST请求时，Express的res.render无法将EJS局部视图渲染到页面上。已查阅相关资料但现有方案无效，无报错信息，客户端与服务端console.log均正常输出。需求是通过按钮触发渲染EJS局部视图，后续将用其他按钮替换该视图，先解决当前渲染问题。

服务端代码（server.js） #

const { request } = require('express')
const express = require('express')
const app = express()
app.set('view engine','ejs')
app.use(express.static('public'))
app.use(express.json({limit: '1mb'}))

app.get('/',(req,res)=>{
    res.render('layout')
})

app.post('/',async(req,res)=>{
     try {
    res.render('./partials/hi')
   } catch (error) {
    console.log(error)
   }
})

app.listen(5000,()=>{
    console.log('server listening')
})

客户端代码（main.js） #

const button = document.getElementById('button')

button.addEventListener('click',()=>{
// const hi = document.createElement(`<%-require('../views/partials/hi.ejs')%>`)

// document.appendChild(hi)
console.log('no')

const options = {
    method : 'POST',
}

fetch('/', options)
})

解决方案 #

核心问题：Fetch属于AJAX异步请求，服务端res.render默认生成的是完整页面响应，但客户端未对返回的HTML内容做处理，导致页面无变化。

1. 修改服务端接口，返回渲染后的HTML字符串 #

将POST接口改为把局部视图渲染成HTML字符串，通过JSON格式返回给客户端：

app.post('/', async (req, res) => {
  try {
    // 用回调获取渲染后的HTML内容
    res.render('./partials/hi', (err, html) => {
      if (err) throw err;
      res.json({ html });
    });
  } catch (error) {
    console.error('渲染错误:', error);
    res.status(500).json({ error: '局部视图渲染失败' });
  }
})

2. 客户端处理返回的HTML并插入页面 #

在客户端接收服务端返回的HTML，插入到页面指定容器中（需提前在layout.ejs中添加容器）：

const button = document.getElementById('button')
// 页面中需存在用于放置局部视图的容器
const partialContainer = document.getElementById('partial-container')

button.addEventListener('click', async () => {
  try {
    const response = await fetch('/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      }
    })
    
    if (!response.ok) throw new Error('请求失败')
    const data = await response.json()
    
    // 将HTML插入容器
    partialContainer.innerHTML = data.html
  } catch (error) {
    console.error('操作出错:', error)
  }
})

3. 补充页面容器（layout.ejs） #

在layout.ejs中添加承载局部视图的容器：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面布局</title>
</head>
<body>
  <button id="button">加载局部视图</button>
  <!-- 局部视图容器 -->
  <div id="partial-container"></div>
  <script src="/main.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user19624774