Ajax 成功獲取 URL 但未更新頁面，而是獲取 [object HTMLDivElement]

Question

所以我正在嘗試使用 javascript 制作下一個/上一個按鈕，並使用 DynamicPage 腳本來幫助測試它。 我只更改了 pagenumber.js 中URL變量的開頭，但基本上會給出相同的消息。 我希望能夠單擊下一個/上一個，然后它將通過 AJAX 用另一頁內容更新主體。

我檢查了控制台，沒有出現錯誤，打開檢查器的網絡選項卡顯示我打算打開的 URL 實際上正在加載，但是容器只顯示[object HTMLDivElement]

我以前從未正確使用過 AJAX，所以我可能做錯了什么。 如果有人能指出我正確的方向，我將不勝感激！

謝謝。

我的pagenumber.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>

另外， dynamicpage.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 object。 這個 object 告訴您服務器如何響應，並允許您以多種方式提取收到的數據。 由於您使用innerHTML來設置新下載的數據，因此您需要使用響應的text()方法。 這將返回一個 promise，完成后以字符串形式顯示結果。 您應該使用該結果在guts元素上設置您的innerHTML 。

If the content returned from the response is a full HTML page and you need a part from it, use the DOMParser API , parse the string to HTML and use querySelector to select the element which you need to content from.

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