Turn.js与AJAX集成问题：动态加载控制器JSON内容不完整

我看你在使用Turn.js开发翻书功能时遇到了两个核心问题：一是AJAX返回的JSON内容只能显示最后一条，二是没有正确处理Turn.js的动态页面加载逻辑。下面我来帮你逐一解决：

问题1：内容被覆盖，只显示最后一条数据 #

你的循环里每次都用$('#Page-Loader').html(Html)，这会覆盖掉之前所有内容，所以最后只会显示循环的最后一次结果。应该用.append()来累加内容，或者先构建完整的HTML字符串再一次性插入。

问题2：Turn.js的动态页面结构问题 #

Turn.js的翻书容器需要每个页面是一个独立的<div>元素，而且动态添加页面后需要调用turn('destroy')再重新初始化，或者用turn('addPage')方法添加新页面。另外你代码里的三元运算符逻辑写反了，比如(response[i].EnglishText != null ? response[i].EnglishText == null : "")应该改成正确的判断。

修改后的完整代码 #

<div class="sample-flipbook" id="BookViewer">
  <div id="book-js" class="text-center">
    <!-- 初始封面和封底 -->
    <div class="hard">
      <img src="~/Theme/OtherAssets/Images/temp-img.jpg" class="img-fluid" style="width:100%; height:100%">
    </div>
    <div class="hard"></div>
    <!-- 这里留空，后面动态添加内容页面 -->
    <div class="hard"></div>
  </div>
</div>

<script type="text/javascript">
$(document).ready(() => {
  initFlipbook();
});

// 封装翻书初始化函数，方便动态更新后重新调用
function initFlipbook() {
  $('#book-js').turn({
    width: 900,
    height: 600,
    autoCenter: true
  });
}

function LoadBook(HBID, ChapterNo, TableRef) {
  $.ajax({
    url: '@Url.Action("GetData", "Books")',
    type: "GET",
    data: { HadithBookID: HBID, ChapterNo: ChapterNo, TableRefNo: TableRef },
    success: (response) => {
      console.log(response.length);
      // 先清空之前的内容页面（保留初始的封面封底）
      $('#book-js div:not(.hard)').remove();

      // 循环构建每个页面
      for (var i = 0; i < response.length; i++) {
        // 修复三元运算符的逻辑错误
        const englishText = response[i].EnglishText ?? "";
        const language1Text = response[i].Language1 ?? "";

        // 构建单个页面的HTML
        const pageHtml = `
          <div class="book-page">
            <p class="urdu-font-fm container-fluid mt-3">${response[i].ArabicText}</p>
            <p class="container-fluid">${englishText}</p>
            <p class="urdu-font-fm container-fluid">${response[i].UrduText}</p>
            <p class="urdu-font-fm container-fluid">${language1Text}</p>
          </div>
        `;

        // 把页面添加到翻书容器的封底前面
        $('#book-js div.hard:last').before(pageHtml);
      }

      // 销毁旧的翻书实例，重新初始化
      $('#book-js').turn('destroy');
      initFlipbook();
    },
    error: (response) => {
      console.log(response);
    }
  });
}
</script>

关键改动说明 #

• 修复逻辑错误：用??空值合并运算符替代错误的三元判断，简化代码同时保证逻辑正确。
• 正确添加页面：把每个数据项作为独立的页面div插入到翻书容器中，保留初始的封面和封底。
• 重新初始化翻书：动态添加页面后，销毁旧的Turn.js实例并重新初始化，确保新页面能被翻书组件识别。
• 避免内容覆盖：不再使用.html()覆盖内容，而是逐个添加页面元素。

这样修改后，AJAX返回的所有JSON内容都会作为独立页面显示在翻书里，你可以正常翻页查看所有内容了。

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