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

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

javascript

Javascript 如何使用JS加载另一个html文件,javascript,Javascript,我正在尝试创建一个网站，我正在尝试找出如何加载页面例如：单击导航器“主页”，然后在屏幕底部加载一个页面，该页面会显示一个文本，例如“Hello Word！” 有人知道怎么做吗？我很确定它涉及JavaScript。要动态加载内容，可以使用XMLHttpRequest（）进行AJAX调用在本例中，一个url被传递到loadPage（）函数，在该函数中返回加载的内容 <!DOCTYPE html> <html lang="en"> <head>

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

例如：

单击导航器“主页”，然后在屏幕底部加载一个页面，该页面会显示一个文本，例如“Hello Word！”

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

要动态加载内容，可以使用

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>


函数加载页（href）
{
var xmlhttp=new XMLHttpRequest（）；
open（“GET”，href，false）；
xmlhttp.send（）；
返回xmlhttp.responseText；
}
家

当单击包含“Home”文本的div元素时，它将id为“bottom”的div元素的html设置为在同一相对位置的“helloworld.html”文档中找到的内容

hello world.html

<p>hello, world</p>

你好，世界

好的，您需要的是一个单页应用程序

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

以下是我遵循的教程：

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

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

如果您不担心这个问题，只想加载html而不进行数据处理，那么一个简单的锚定标记就足够了：

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

对不起，这对我的理解没有多大帮助。你是说单页应用程序吗？你总是停留在同一个页面上，但是内容会被重新加载。就像这个网站的工作原理一样-habbosecrets.com。当你点击“新闻”时，它会加载文本和图像。我真的认为这是一个有用的问题+答案-这么多关于一个类似主题的答案会直接跳进框架谢谢，但要记住一个问题。超过1页怎么样。会发生什么情况？通过反复调用此实现，可能会加载、替换或追加多个文档内容。@上面的MuhammadUmer演示了一个同步请求。nvm我刚刚重新实现了最后一个参数，即
false
定义了请求是否是异步的：DSyntax:
open（方法、url、异步）