9

我正在尝试创建一个网站，并且正在尝试弄清楚如何加载页面。

例如：

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

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

4

3 回答 3

19

要动态加载内容，您可以使用XMLHttpRequest().

在此示例中，将 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>
于 2013-09-21T08:43:48.360 回答
0

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

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

这是我遵循的教程：http: //andru.co/building-a-simple-single-page-application-using-angularjs

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

于 2013-09-21T08:45:50.170 回答
-1

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

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

 <a href="path/to/hello.html">click</a>
于 2020-12-25T18:07:36.323 回答