javascript - 使用 AJAX 的下一页/上一页

Question

我的目标是在 html 页面顶部创建下一页/上一页按钮，并说我在“book.html”上，当前“显示”ID 内容为“page-1”通过ajax加载“page-2.html”，如果我单击“下一步”按钮，它将通过ajax加载“page-2.html”，而不重新加载页面。

我将如何通过 AJAX 来做到这一点，因为我已经看过很多示例，但其中大多数都完全不同，并且大多数使用 AJAX 的示例都是针对 WordPress 表单之类的。

当前使用下面的行将打开整个页面，我想知道如果可能的话使用 AJAX 的最佳方法:) 窗口.location(url);

我将合并以下代码作为示例:

var i = 1;
var url = "pages/page-" + i + ".html";

    function incPage() {
    if (i < 10) {
        i++;
        window.location = url; 
        //load next page in body using AJAX request

    } else if (i = 10) {
        i = 0;
    }
    document.getElementById("display").innerHTML = i;
}

function decPage() {
    if (i > 0) {
        --i;
        window.location = url; 
        //load previous page in body using AJAX request
    } else if (i = 0) {
        i = 10;
    }
    document.getElementById("display").innerHTML = i;
}

Answer 1

您可以使用获取

var i = 1;

function loadPage(i) {
  var url = "pages/page-" + i + ".html";
  fetch(url).then(content => {
    document.getElementById("content").innerHTML = content;
    document.getElementById("display").innerHTML = i;
  });
}

function incPage() {
  i++;
  if (i > 10) i = 1;
  loadPage(i);
}

function decPage() {
  i--;
  if (i < 1) i = 10;
  loadPage(i);
}