Следующая / Предыдущая Страницы с AJAX

Question

Я собираюсь создать кнопки для следующей / предыдущей страницы вверху страницы html и сказать, что я нахожусь в «book. html», с текущим содержимым идентификатора «display». «page-1. html» до ajax, если я нажму кнопку «Далее», будет загружено «page-2. html» до ajax, БЕЗ перезагрузки страницы.

Как бы я go сделал это через AJAX, как я видел много примеров, но большинство из них совершенно разные, и большинство примеров использования AJAX предназначены для форм WordPress и прочего.

В настоящее время с помощью приведенной ниже строки откроется вся страница, я хочу узнать, как лучше всего go использовать AJAX вместо этого, если это возможно :) window.location (url);

I Я приведу ниже код в качестве примера:

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