javascript - 我可以将 HTML 片段存储在不同的文件中但通过 JavaScript 访问吗

Question

不确定我的问题表述是否正确，但我会尝试在问题正文中更清楚地解释。

我正在使用 ASP.NET C#。

我有一个 WebForm 页面。

在这个页面中，例如我有这个:

<div id="page1" style="display:block">
    page 1 contents
    <a href='#' id="liPage1" onclick='Page2();'>Page2</a>
</div>

<div id="page2" style="display:block">
    page 2 contents
    <a href='#' id="liPage2" onclick='Page1();'>Page1</a>
</div>

<script>
  //this is just sudo code
  Page1 function will hide div page2 and show div page1
  Page2 function will hide div page1 and show div page2
</script>

现在我不需要任何有关脚本的帮助。

我要问的是我是否可以将 page1 的 HTML 放在一个文件中，将 page2 的 HTML 放在另一个文件中，并通过客户端加载这些 HTML“片段”。

通过将 HTML 封装在用户控件中，我可以轻松地在服务器代码中完成此操作。我想知道我是否可以使用客户端调用执行相同的操作。但我真的不想在 JavaScript 代码本身中“编写”HTML。

我问这个是因为我打算有相当多的页面，并且我想通过客户端编码来渲染所有页面，而不是每次都回调到服务器。这都是可读性和管理的问题。

我正在思考资源文件之类的问题，但不知道如何思考。

我希望这一切都清楚了吗？

Answer 1

是的，您可以简单地执行一些ajax调用，然后将响应设置为容器元素的内容。

所以，假设您有 file1.html、file2.html 和 file3.html，并且您希望将所有这些“片段文件”包含在 #container 中。

脚本看起来像这样:

[
    "file1.html",
    "file2.html",
    "file3.html"
].forEach(function(file) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", file, true);
    xhr.addEventListener("load", function() {
        document.querySelector("#content").html += xhr.response;
    });
    xhr.send();
});