我正在尝试创建一个网站,想知道如何加载页面。
例如:
您单击导航器上的“主页”,然后屏幕底部加载一个页面,其中显示文本,例如“Hello Word!”
有人知道该怎么做吗?我相信这涉及JavaScript。
我正在尝试创建一个网站,想知道如何加载页面。
例如:
您单击导航器上的“主页”,然后屏幕底部加载一个页面,其中显示文本,例如“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>
当包含文本“Home”的div元素被点击时,它将id为“bottom”的div元素的html设置为在相同相对位置找到的“hello-world.html”文档中的内容。
hello-world.html
<p>hello, world</p>
xmlhttp.responseText
时,它应该是空的,因为它应该在文件下载之前运行,至少大部分时间都是这样。但它确实可以工作,为什么呢? - Muhammad Umerfalse
定义了请求是否是异步的。 :D - Muhammad Umeropen(method,url,async)
- Jason Sturges好的,你需要的是一个单页应用程序。
有很多技术可以实现它,但并不容易。
这是我遵循的一个教程:http://andru.co/building-a-simple-single-page-application-using-angularjs
如果你想进一步了解单页应用程序,你肯定需要使用Angular模板。
加载HTML时不一定需要使用Ajax调用。只有在需要服务器在成功处理数据后才能加载页面时,才需要使用它们。
如果您没有这方面的顾虑,只是想加载HTML而无需进行数据处理,则简单的锚点标签就足够了:
<a href="path/to/hello.html">click</a>