使用 AJAX 的下一页/上一页

Question

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

我将如何通过 AJAX 进行此操作，因为我已经看到了很多示例，但其中大多数是完全不同的，并且大多数使用 AJAX 的示例都是针对 WordPress 表单和内容的。

目前使用以下行将打开整个页面，如果可能的话，我想知道使用 AJAX 的最佳方法:) window.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

您可以使用fetch

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);
}