AJAX更新EJS模板遇问题：分页加载食谱的双问求解

1. 解决loadrecipes.js中的EJS if语句问题 #

EJS是服务端渲染模板引擎，浏览器无法直接解析<% if(...) %>这类EJS语法，你在客户端的loadrecipes.js里写EJS的if语句肯定会失效，甚至会把代码当成普通文本显示在页面上。解决思路如下：

• 把条件判断逻辑移到服务端：如果是需要根据数据判断渲染内容，在服务端的EJS模板（比如index.ejs）里完成判断，或者在服务端处理数据后返回给客户端，客户端只负责展示。
• 客户端用原生JS做条件判断：如果是AJAX请求返回的数据需要做判断，直接在loadrecipes.js里用JS的if/else处理，比如遍历返回的食谱数据时，根据数据的某个字段决定渲染什么样的DOM元素，而不是用EJS语法。

举个简单示例，假设你要判断食谱是否有图片，客户端JS里应该这么写：

// 遍历AJAX返回的食谱数据
recipes.forEach(recipe => {
  let imgHtml = '';
  // 用JS的if判断，而非EJS语法
  if (recipe.image) {
    imgHtml = `<img src="${recipe.image}" alt="${recipe.label}">`;
  } else {
    imgHtml = '<div class="no-image">无图片</div>';
  }
  // 拼接HTML并插入页面
  const recipeItem = `<div class="recipe">${imgHtml}<h3>${recipe.label}</h3></div>`;
  document.getElementById('recipes-container').insertAdjacentHTML('beforeend', recipeItem);
});

2. AJAX请求时更优的EJS更新方式 #

不建议在客户端使用EJS模板，更优的方式有两种：

方式一：服务端返回JSON数据，客户端动态生成DOM #

• 服务端编写API接口（比如/api/recipes），返回纯JSON格式的食谱数据，包含分页所需的next链接。
• 客户端通过AJAX请求该接口，拿到JSON数据后，用原生JS或轻量前端模板引擎（比如Handlebars）动态生成DOM元素，插入到页面对应容器中。
• 优点：前后端职责清晰，降低服务端渲染压力，客户端更新更灵活。

方式二：服务端返回渲染好的HTML片段 #

• 服务端创建单独的EJS模板片段（比如recipe-item.ejs），专门渲染单个食谱的HTML结构。
• 编写接口（比如/recipes/partial），接收分页参数或next链接，获取数据后渲染该模板片段，返回纯HTML字符串。
• 客户端AJAX请求该接口，拿到HTML后直接追加到页面的食谱容器里。
• 优点：复用服务端的EJS模板，无需在客户端重复编写模板逻辑，保持前后端渲染的一致性。

注意：不要在客户端加载EJS库解析模板，这会增加客户端代码体积，还会导致前后端模板维护重复，容易出现内容不一致的问题。

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