Question

我正在尝试创建一个网站，而我正试图找出如何加载页面。

例如：

您单击导航器“Home”然后单击屏幕底部它会加载一个页面女巫文本，例如“Hello Word！”。

有人知道该怎么办吗？我很确定它涉及JavaScript。

Answer 1

要动态加载内容，您可以使用XMLHttpRequest()进行AJAX调用。

在这个例子中，一个url被传递给loadPage()函数，在该函数中返回加载的内容。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript">
            function loadPage(href)
            {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", href, false);
                xmlhttp.send();
                return xmlhttp.responseText;
            }
        </script>
    </head>

    <body>
        <div onClick="document.getElementById('bottom').innerHTML = 
                      loadPage('hello-world.html');">Home</div>

        <div id="bottom"></div>
    </body>

</html>

当点击包含“Home”文本的div元素时，它将id为“bottom”的div元素的html设置为在相同位置的“hello-world.html”文档中找到的内容。

<强>你好-world.html

<p>hello, world</p>

Answer 2

好的，您正在寻找的是单页应用程序。

有很多技术可以实现它，但并不容易。

以下是我执行此操作的教程：http://andru.co/building-a-simple-single-page-application-using-angularjs

如果您想进一步使用SPA，您肯定需要角度模板。

Answer 3

没有必要使用 Ajax 调用来加载 html。当需要服务器在加载页面之前成功处理数据时使用它们，如果处理成功。

如果您没有这个顾虑，只想加载 html 而不进行数据处理，一个简单的锚标记就足够了：

 <a href="path/to/hello.html">click</a>

如何使用JS加载另一个html文件

3 个答案: