Ajax成功获取URL，但没有更新页面，而是获取[object HTMLDivElement]

Question

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

我检查了控制台，没有出现任何错误，打开检查器的Network选项卡显示我要打开的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>

此外，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对象。这个对象告诉您服务器是如何响应的，并允许您以多种方式提取接收到的数据。由于您使用innerHTML来设置新下载的数据，因此需要使用响应的text()方法。这将返回一个承诺，即完成后以字符串形式显示结果。您应该使用该结果在guts元素上设置innerHTML。

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