Javascript Ajax已成功获取URL，但未更新页面，而是获取[object HtmlLevel]

因此，我尝试使用javascript制作下一个/上一个按钮，并使用DynamicPage脚本来帮助测试这一点。我只更改了pagenumber.js中URL变量的开头，但实际上会给出相同的消息。我希望能够单击next/prev，然后通过AJAX用另一页内容更新主体

我检查了控制台，没有出现任何错误，打开inspector的Network选项卡会显示我要打开的URL实际上正在加载，而容器只是显示出来

[object htmldevelment]

我以前从未正确使用过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);
}

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

$(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');

});

---

fetch

返回一个对象。此对象告诉您服务器如何响应，并允许您以多种方式提取接收到的数据。由于使用

innerHTML

设置新下载的数据，因此需要使用响应方法。这将返回一个承诺，即在完成时以字符串形式显示结果。您应该使用该结果在

guts

元素上设置

innerHTML

如果从响应返回的内容是完整的HTML页面，并且您需要其中的一部分，请使用，将字符串解析为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;
  }
}

---

在pagenumber.js中，有一行写着

document.getElementById（“guts”）.innerHTML=guts。我可以知道变量
guts
在哪里定义吗？它在HTML中声明，定义为div，dynamicpage.js和pagenumber.js都使用它。谢谢！现在开始变得更有意义了。我如何使
内容
与通过AJAX显示在主页上的其他页面的“胆量”相等？你的意思是你只想使用在
获取
响应中收到的其他页面的
内容？是的，就是这样，我该怎么做？在运行页面时，我得到一个错误，说“Uncaught（in promise）TypeError:Cannot set property'innerHTML'of null at VM194 pagenumber.js:32”，具体地说是
guts.innerHTML=content那么您的guts div不在页面中。