Ajax успешно извлекает URL, но не обновляет страницу, вместо этого получает [объект HTMLDivElement]

Question

Поэтому я пытаюсь создать кнопки «следующий / предыдущий», используя javascript, и использовал скрипт DynamicPage, чтобы помочь проверить это. Я только изменил начало переменной URL в pagenumber. js, однако, по сути, выдаст то же сообщение. Я хочу иметь возможность щелкнуть далее / предыдущий, который затем обновит основной текст другой страницей содержимого с помощью AJAX.

Я проверил консоль, ошибок нет и открываю На вкладке «Инспектор сети» отображается, что URL, который я собираюсь открыть, на самом деле загружается, однако контейнер просто отображает [object HTMLDivElement]

. До этого я никогда не использовал AJAX, так что скорее всего Я делаю что-то не так. Если бы кто-то мог указать мне правильное направление, я был бы очень признателен!

Спасибо.

Мой номер страницы. js выглядит следующим образом:

var i = 0;

function loadPage(i) {
     /* IMPORTANT: ENSURE var url equals the exact domain and location of inductions OR it will fail    */
     var url = "https://example.com/inductions/induction-page-" + i + ".html";
     fetch(url).then(content => {
         document.getElementById("guts").innerHTML = guts;
         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);
}

Моя основная HTML выглядит следующим образом:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script type='text/javascript' src='js/pagenumber.js'></script>

<div id="container">
    <div id="page-wrap">

        <header>
            <a id="decc"><input type="button" value="Previous" id="dec" onclick="decPage();"/></a>
            <a id="incc"><input type="button" value="Next" id="inc" onclick="incPage();"/></a>
            Page: <label id="display"></label>
        </header>

    <section id="main-content">
        <div id="guts">
            <h3>Initial Induction Page</h3>
            <p>This is initial content on loading main HTML doc. This content will change when hitting next/prev buttons.</p>
        </div>
    </section>

    </div>

Кроме того, динамическая страница. js выглядит следующим образом:

$(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el;

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

$("nav").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    console.log(window.location.hash);
    return false;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav a").removeClass("current");
                    $("nav a[href="+newHash+"]").addClass("current");
                });
            });
    };

});

$(window).trigger('hashchange');

});

Answer 1

fetch возвращает объект Response. Этот объект сообщает вам, как сервер ответил, и позволяет извлекать данные, которые вы получили несколькими способами. Поскольку вы используете innerHTML для установки вновь загруженных данных, вам нужно использовать метод ответа text(). Это вернет обещание, что по окончании представит результат в виде строки. И вы должны использовать этот результат для установки innerHTML с элементом guts.

Если содержимое, возвращаемое из ответа, является полной страницей HTML, и вам нужна часть из него, используйте API DOMParser , разберите строку на HTML и используйте querySelector, чтобы выбрать элемент, из которого вам нужно содержимое.

var i = 0;
var guts = document.getElementById("guts");
var display = document.getElementById("display");

function loadPage(i) {
  /* IMPORTANT: ENSURE var url equals the exact domain and location of inductions OR it will fail    */
  let url = "https://example.com/inductions/induction-page-" + i + ".html";
  fetch(url).then(response => {
    if (response.status === 200) {
      return response.text();
    }
    throw new Error(`Error occurred fetching ${url}. Status: ${response.status});
  }).then(getGutsFromContent).then(content => {
    guts.innerHTML = content;
    display.textContent = i;
  });
}

function getGutsFromContent(content) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(content, 'text/html');
  const guts = doc.querySelector('#guts');
  if (guts !== null) {
    return guts.innerHTML;
  }
}