Unpoly框架中up-follow未通过XHR加载内容该如何解决？

你使用的up-target是Unpoly前端框架的专用属性，要实现点击链接走XHR局部加载，按以下步骤配置即可：

• 引入Unpoly依赖
  先将Unpoly的静态资源下载到本地项目中，在页面的<head>或<body>末尾引入对应的JS和CSS文件：

  <link rel="stylesheet" href="/你的本地资源路径/unpoly.min.css">
  <script src="/你的本地资源路径/unpoly.min.js"></script>
  

• 确认目标容器存在
  当前页面必须存在id为content的DOM元素，作为加载内容的插入容器，示例如下：

  <div id="content">
    <!-- 异步加载回来的内容会插入到此处 -->
  </div>
  

• 服务端适配（可选但推荐）
  Unpoly发起XHR请求时会自动携带X-Up-Target: #content请求头，服务端可识别该请求头，仅返回#content容器内的HTML片段，降低传输体积。如果不做适配，Unpoly也会自动从接口返回的完整HTML中提取对应id的内容插入，不会影响基础功能。
• 消除事件冲突
  你当前代码用<a>标签套<button>可能存在浏览器默认点击事件冲突，可改为直接在button上声明Unpoly属性：

  <button type="button" up-follow up-href="/hb/test2/" up-target="#content" rel="nofollow">Action</button>
  

• 检查全局配置
  如果配置过Unpoly的全局拦截规则，确认没有屏蔽带up-target属性的a标签，也可以手动给当前a标签添加up-follow属性，强制Unpoly拦截点击事件：

  <a href="/hb/test2/" up-follow up-target="#content" rel="nofollow"><button type="button">Action</button></a>
  

配置完成后可打开浏览器开发者工具的Network面板，点击按钮查看是否发起了对应路径的XHR请求，根据请求状态和返回内容排查剩余问题。

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