在JSP/jQuery页面中动态展示AEM Experience Fragment的实现方法咨询

你提到的直接在现有XF组件请求URL后追加page、slot参数的方式默认不可行，AEM标准XF核心组件的.model.html端点不支持根据这类自定义参数自动匹配对应的XF资源。以下是经过生产验证的两种实现方案：

方案1：服务端映射方案（适配当前JSP技术栈，首推） #

该方案和你现有<c:import>调用逻辑完全兼容，无需修改前端代码，渲染性能最优：

• AEM侧预配置映射关系：可以使用内容片段或者自定义OSGi配置，存储「页面标识+插槽ID」到XF资源路径的映射规则，比如prd商品详情页+slot2对应/content/experience-fragments/zh-CN/marketing/prd-detail-banner-slot2的XF存储路径。
• AEM侧开发自定义GET Servlet：注册Servlet路径为/bin/get-xf-by-slot，逻辑为接收page、slot两个请求参数，查询映射表拿到对应XF的资源路径后，调用AEM原生XF渲染接口返回渲染完成的HTML内容。
• JSP侧直接调用即可：

<c:import url="https://你的AEM发布实例域名/bin/get-xf-by-slot?page=prd&slot=2" />

方案2：前端异步拉取方案（适配懒加载/动态插槽场景） #

如果插槽需要懒加载、或者要根据用户交互动态渲染，可以选择jQuery异步拉取的方案：

• AEM侧的自定义Servlet和方案1一致，额外根据站点域名配置CORS规则允许跨域请求即可。
• 页面对应插槽的HTML结构定义：

<div class="xf-slot" data-slot-id="2"></div>

• jQuery拉取代码示例：

$(function() {
  // 可从页面meta标签、全局变量获取当前页面标识
  const currentPageId = 'prd';
  $('.xf-slot').each(function() {
    const slotId = $(this).data('slot-id');
    $.get(`https://你的AEM发布实例域名/bin/get-xf-by-slot?page=${currentPageId}&slot=${slotId}`, (xfHtml) => {
      $(this).html(xfHtml);
    }).fail(() => {
      // 可选配置加载失败的兜底内容
      $(this).hide();
    });
  });
});

生产环境注意事项 #

• 所有用到的映射配置、XF资源、自定义Servlet都要同步到AEM发布实例，并且配置匿名访问权限。
• 给自定义Servlet配置请求缓存规则，以page、slot为缓存键缓存返回的HTML内容，大幅降低AEM服务器压力。
• 如果站点和AEM发布实例同域名，可以把Servlet路径配置到Dispatcher缓存规则中，进一步提升加载速度。

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