点击按钮渲染EJS视图失败求助：jQuery.load仅加载HTML的解决方案

嗨，我来帮你搞定这个EJS渲染的问题～你之前的代码无效主要有两个原因：一是load()方法确实只能加载纯HTML，EJS模板需要先编译成HTML才能被浏览器识别；二是你代码里的元素ID有个拼写错误（addPartialtHere多了一个t，应该是addPartialHere），这也会导致jQuery找不到目标元素哦！

下面给你两个可行的解决方案，优先推荐第一个（服务器端编译），更安全也符合EJS的常规使用逻辑：

方案一：服务器端编译EJS后返回HTML（推荐） #

假设你用的是Express框架（EJS最常用的搭配），先在服务器端配置好EJS模板引擎，再新增一个路由专门返回编译后的EJS片段：

服务器端代码（Express示例） #

const express = require('express');
const app = express();

// 配置EJS为模板引擎
app.set('view engine', 'ejs');
app.set('views', './views'); // 这里填你的EJS文件存放目录，比如根目录下的views文件夹

// 新增路由，返回编译好的test模板
app.get('/test-partial', (req, res) => {
  // 如果需要给模板传数据，可以在这里传入，比如 { title: '新增的部分' }
  res.render('test'); // 这里的test对应你的EJS文件名（比如test.ejs）
});

app.listen(3000, () => console.log('服务器启动在3000端口'));

前端修正后的代码 #

<button onclick="show()" id="addPartial">Add more TestPartial</button>
<div id="addPartialHere"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function show() {
  // 请求服务器编译好的HTML片段
  $("#addPartialHere").load("/test-partial");
}
</script>

点击按钮时，前端请求服务器的/test-partial路由，服务器会自动把test.ejs编译成HTML返回，load()就能正常渲染内容了。

方案二：前端直接编译EJS（应急场景使用） #

如果暂时没法修改服务器端代码，也可以用最新版的EJS在前端编译模板。不过这种方式需要服务器允许直接访问.ejs文件，且存在一定安全风险，不推荐在生产环境使用：

前端代码示例 #

<button onclick="show()" id="addPartial">Add more TestPartial</button>
<div id="addPartialHere"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ejs@3.1.9/ejs.min.js"></script>
<script>
function show() {
  // 先获取EJS模板文件的源码
  $.get('/test.ejs', function(templateContent) {
    // 编译模板，可传入需要的数据，比如 { content: '新的测试内容' }
    const compiledHtml = ejs.render(templateContent, {});
    // 把编译后的HTML插入到目标元素
    $("#addPartialHere").html(compiledHtml);
  });
}
</script>

额外检查点 #

• 确认服务器已经启动，路由地址和前端请求的地址一致（比如端口号是否匹配）
• 确认EJS文件的路径正确，服务器的views目录设置和实际文件位置对应
• 打开浏览器控制台查看是否有报错（比如404错误，说明路由或文件路径不对）

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